Giving a border to an HTML table row, <tr>

html css border html-table
Tiny picture Tiny · Jan 1, 2014 · Viewed 264.3k times · Source

Is it possible to border a table row, <tr> in one go instead of giving a border to individual cells, <td> like,

This gives a border around the given <tr> but it requires a border around individual cells.

Can we give a border to <tr> only in one go?

→ jsFiddle

Answer

Jukka K. Korpela picture Jukka K. Korpela · Jan 2, 2014

You can set border properties on a tr element, but according to the CSS 2.1 specification, such properties have no effect in the separated borders model, which tends to be the default in browsers. Ref.: 17.6.1 The separated borders model. (The initial value of border-collapse is separate according to CSS 2.1, and some browsers also set it as default value for table. The net effect anyway is that you get separated border on almost all browsers unless you explicitly specifi collapse.)

Thus, you need to use collapsing borders. Example: 

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

Related questions

How can I apply a border only inside a table?

I am trying to figure out how to add border only inside the table. When I do: table { border: 0; } table td, table th { border: 1px solid black; } The border is around the whole table and also between table cells. What …

Read More
How to hide the border for specified rows of a table?

I want to hide the border for a specific rows of a table.How to do it? Any Idea? Sample code is Highly Appreciated.

Read More
Overlapping table element left and right border

I want to set each element in the first row of my table to have a left border of a certain color and a right border of a certain color. Unfortunately, it looks like the borders of adjacent table cells …

Read More