Table's tr's border doesnt appear

Question

I want the <tr> will have a border-bottom, but it doesnt show. Here is what I have done: jsfiddle
the code(although you can see it in the fiddle):

<table style="width:600px;">
  <tr style="border-bottom: 1px solid black;">
    <td style="width:30%">header1</td>
    <td style="width:50%">header2</td>
    <td style="width:20%">header3</td>
  </tr>
  <tr>
    <td>something1</td>
    <td>something2</td>
    <td>something3</td>
  </tr>
</table>

Also i dont want to have the space between the bottom-border when i use <td style="border-bottom:1px solid black"> on the <td>s of the top <tr>

You can't style a `` tag it's only a logical grouping element for the table. — leigero, Mar 14 '14 at 08:27
@leigero then how can i do that the top tr will have an border-bottom? — Omer, Mar 14 '14 at 08:29
@Omer just style the top TD elements. I updated my answer to include your edited question. — leigero, Mar 14 '14 at 08:38
@Stijn and @C Travel, look at the accepted answer of what you thought might be a duplicate of this and my accepted answer, i have already seen those threads but they were no use for me becuase no one there suggested the border-spacing:0; for the table, therfore this thread is not a dublicate — Omer, Mar 14 '14 at 08:45
@Omer to be fair, you added that part 2 minutes ago, while our duplicate comments were 16 and 18 minutes ago. They're an exact duplicate of your original question. — user247702, Mar 14 '14 at 08:47
yee you right, because i thought there will be another way then to add the s a border-bottom, i would have added it anyway if no one would have suggested an answer that solve it anyway. i didnt think there is a point of adding it if someone has already answer it. now i am in ban because of that, so i added it — Omer, Mar 14 '14 at 08:49
Note that it's not true that you can't style ``s at all. For example, you can apply heights to them. But border styling has no effect on them. — Alohci, Mar 14 '14 at 08:58

leigero · Answer 1 · 2014-03-14T08:37:53.350

You cannot style a <tr> tag, it is only a logical grouping tag for table elements.

Since you only want the top row styled, just give the element in the top row a specific class identifier and style that:

JSFiddle

CSS

table{
    border-spacing: 0px;
}
.topRow{
    border-bottom: 1px solid black; 
    width:50%;
}

HTML

<table style="width:600px;">
  <tr>
    <td class="topRow">header1</td>
    <td class="topRow">header2</td>
    <td class="topRow">header3</td>
  </tr>
  <tr>
    <td>something1</td>
    <td>something2</td>
    <td>something3</td>
  </tr>
</table>

score 1 · Accepted Answer · answered Mar 14 '14 at 08:32

1

As others say, you can't style tr but you can do style td. You may do it like this.

table {
    border-spacing:0;
}
td {
    border-bottom: 1px solid black;
}

answered Mar 14 '14 at 08:32

JunM

7,040
7
37
58

Table's tr's border doesnt appear

2 Answers2