Giving a border to an HTML table row,

Question

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

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

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

Jukka K. Korpela · Accepted Answer · 2014-10-03T14:51:30.370

171

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>

edited Oct 03 '14 at 14:51

answered Jan 01 '14 at 23:12

Jukka K. Korpela

195,524
37
270
390

1

@Robert Siemer While it is true that this puts a border around rows, it also requires "border-collapse: collapse". Columns cannot be spaced using the cellpadding property in this manner. The outline property used in csmckelvey's answer below provides for greater control over the look of the table and achieves exactly the same goal. This should not be the accepted answer as it unnecessarily limits functionality to achieve the goal. – me_ Jan 28 '18 at 07:14

takendarkk · Answer 2 · 2014-01-01T19:33:06.770

104

Absolutely! Just use

<tr style="outline: thin solid">

on which ever row you like. Here's a fiddle.

Of course, as people have mentioned, you can do this via an id, or class, or some other means if you wish.

edited Jan 01 '14 at 19:33

answered Jan 01 '14 at 19:17

takendarkk

3,347
8
25
37

2

should be a container not an element so formatting his child through his style is not correct in terms of semantics, even if it works. – Itay Gal Jan 01 '14 at 19:27
1

Google Chrome and Internet Explorer show a border around a `` but Mozilla Fire Fox doesn't display a border. – Tiny Jan 01 '14 at 19:29
1

Try using `outline` instead of `border`. That should fix compatibility. I only have Chrome atm, so I can't test it. – takendarkk Jan 01 '14 at 19:32
4

Outline is not border. – Jukka K. Korpela Jan 01 '14 at 19:59
@JukkaK.Korpela What are the main differences? If you use outline and no border, are there any visual differences? Also, if this is incorrect can you provide a correct solution? – takendarkk Jan 01 '14 at 20:28
Chrome 37 does not put a border on `tr` http://jsbin.com/mopuci/1/edit?html,css,output – George Mauer Oct 05 '14 at 03:39
@takendarkk outline do not work with `border-radius` – tsh Mar 01 '17 at 06:03
@tsh border-collapse: collapse doesn't work with cellpadding – me_ Jan 28 '18 at 07:17
A good suggestion, but in my case, I want to be able to set border-top and border-bottom. `outline` does not seem to provide this functionality. – matt forsythe Sep 28 '21 at 04:06
Outline is too close to the contents of the row, and padding does not work inside of outlines. Also, you can't show a bottom line this way. – David Spector Jun 27 '23 at 17:51

Itay Gal · Answer 3 · 2014-01-01T19:35:41.660

19

Yes. I updated my answer DEMO

table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

table td:first-child {
     border-left: thin solid;
}

table td:last-child {
     border-right: thin solid;
}

If you want to style only one <tr> you can do it with a class: Second DEMO

edited Jan 01 '14 at 19:35

answered Jan 01 '14 at 19:14

Itay Gal

10,706
6
36
75

It looks like Internet Explorer dislikes `last-child` (It does not seem to support). – Tiny Jan 01 '14 at 20:48
@Tiny which IE version do you wish to support? Version 9+ supports first-child and last-child. – Itay Gal Jan 01 '14 at 21:09
1

You are not styling , you’re styling . – Robert Siemer Oct 03 '14 at 11:41

Richard Bonneau · Answer 4 · 2019-12-03T16:18:36.840

16

You can use the box-shadow property on a tr element as a subtitute for a border. As a plus, any border-radius property on the same element will also apply to the box shadow.

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);

edited Dec 03 '19 at 16:18

answered Nov 22 '19 at 15:44

Richard Bonneau

1,076
11
9

1

This offers much more control over styling than `outline` does. Should be a higher answer. – Jacob Stamm Nov 02 '20 at 17:49
Very good workaround – Ricardo F. Mar 10 '22 at 10:03
box-shadow-bottom: rgb(0, 0, 0) did not work for me to draw a line under a row. – David Spector Jun 27 '23 at 17:54

score 8 · Answer 5 · edited Feb 27 '15 at 15:39

8

Make use of CSS classes:

tr.border{
    outline: thin solid;
}

and use it like:

<tr class="border">...</tr>

edited Feb 27 '15 at 15:39

Community

1
1

answered Jan 01 '14 at 19:28

Fanie Reynders

580
3
16

score 2 · Answer 6 · edited Jun 12 '23 at 18:44

2

Left cell:

style="border-style:solid;border-width: 1px 0px 1px 1px;"

midd cell(s):

style="border-style:solid;border-width: 1px 0px 1px 0px;"

right cell:

style="border-style:solid;border-width: 1px 1px 1px 0px;"

edited Jun 12 '23 at 18:44

arloargent

3
4

answered May 01 '17 at 16:58

Juergen Schulze

1,515
21
29

score 1 · Answer 7 · answered Jul 04 '19 at 07:52

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Could you add comment to your answer and explain what did you changed? — franiis, Jul 04 '19 at 08:12

score 1 · Answer 8 · answered Apr 27 '22 at 12:03

1

You can try this (Border Just bottom of every row)

  table {
    border-collapse: collapse;
  }

  tr {
    border-bottom: 1px solid black;
 }

answered Apr 27 '22 at 12:03

Mujahidul Islam

265
4
8

Works better, but removes all padding from the table. – David Spector Jun 27 '23 at 17:58

score 0 · Answer 9 · answered Nov 06 '20 at 10:00

adding border-spacing: 0rem 0.5rem; creates a space for each cell (td, th) items on its bottom while leaving no space between the cells

    table.app-table{
        border-collapse: separate;
        border-spacing: 0rem 0.5rem;
    }
    table.app-table thead tr.border-row the,
    table.app-table tbody tr.border-row td,
    table.app-table tbody tr.border-row th{
        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    table.app-table thead tr.border-row th:first-child,
    table.app-table tbody tr.border-row td:first-child{
        border-left: 1px solid #EAEAEA;
    }

    table.app-table thead tr.border-row th:last-child,
    table.app-table tbody tr.border-row td:last-child{
        border-right: 1px solid #EAEAEA;
    }

score 0 · Answer 10 · answered Jun 27 '23 at 21:45

While the TR element doesn't seem to honor CSS, the TD element does. So you can set borders to draw lines and set padding to adjust position, just by applying CSS to TD elements. It works for an entire row if you apply the same CSS to all the TDs for that row.

score -7 · Answer 11 · answered May 08 '18 at 04:54

After fighting with this for a long time I have concluded that the spectacularly simple answer is to just fill the table with empty cells to pad out every row of the table to the same number of cells (taking colspan into account, obviously). With computer-generated HTML this is very simple to arrange, and avoids fighting with complex workarounds. Illustration follows:

<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>


<h3>Simple solution, artificially insert empty cells</h3>

<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only<td><td>
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only<td>
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>

Giving a border to an HTML table row,

11 Answers11

Linked

Related