How to Add Internal Lines (Borders) in a Table With CSS

This article explains how to add internal lines to cells with CSS table styles. When you create a CSS table border, it only adds the border around the outside of the table.

CSS Table Borders

When you use CSS to add borders to tables, it only adds the border around the outside of the table. If you want to add internal lines to the individual cells of that table, you need to add borders to the interior CSS elements. You can use the HR tag to add lines inside individual cells.

To apply the styles covered in this tutorial, you need a table on a webpage. Then, you create a style sheet as an internal style sheet in the head of your document (if you are dealing with only a single page) or attached to the document as an external style sheet (if the site has multiple pages). You put the styles to add interior lines into the style sheet.

Before You Start

Decide where you want the lines to appear in the table. You have several options, including:

• Surrounding all the cells to form a grid 
• Positioning the lines between just the columns
• Just between the rows
• Between specific columns or rows.

You can also position the lines around individual cells or inside individual cells.

You're also going to need to add the border-collapse property to your CSS for your table. This will collapse the borders to a single line between each cell and allow table row borders to function properly. Before you do anything, add the following block to your CSS.

table {
 border-collapse: collapse;
}

How to Add Lines Around All the Cells in a Table

To add lines around all cells in your table, creating a grid effect, add the following to your stylesheet:

How to Add Lines Between Just the Columns in a Table

Read More

Using HTML TABLE Element Attributes

By Jennifer Kyrnin

To add lines between the columns to create vertical lines that run from top to bottom on the table's columns, add the following to your stylesheet:

If you don't want vertical lines to appear on the first column, you can use the first-child pseudo-class to target only those elements that appear first in their row and remove the border.

td:first-child, th:first-child {
 border-left: none;
}

How to Add Lines Between Just the Rows in a Table

As with adding lines between the columns, you can add horizontal lines between rows with one simple style added to the style sheet, as follows:

To remove the border from the bottom of the table, you would once again rely on a pseudo-class. In this case, you'd use last-child to target only the final row.

tr:last-child {
 border-bottom: none;
}

How to Add Lines Between Specific Columns or Rows in a Table

If you only want lines between specific rows or columns, you can use a class on those cells or rows. If you'd prefer a little cleaner markup, you can use the nth-child pseudo-class to select specific rows and columns based on their position.

For example, if you only want to target the second column in each row, you can use nth-child(2) to apply CSS to only the second element in every row.

td:nth-child(2), th:nth-child(2) {
 border-left: solid 2px red;
}

The same applies to the rows. You can target a specific row using nth-child.

tr:nth-child(4) {
 border-bottom: solid 2px green;
}

How to Add Lines Around Individual Cells in a Table

While you certainly can use pseudo-classes to target individual cells, the easiest way to handle a situation like this is with a CSS class. To add lines around individual cells, you add a class to the cells you want a border around:

Then add the following CSS to your stylesheet:

How to Add Lines Inside Individual Cells in a Table

If you want to add lines inside the contents of a cell, the easiest way to do this is with the horizontal rule tag (