Why TR not taking style?

Question

CSS

table tr {border-bottom:1px solid #008999}

HTML

<table width="100%" cellspacing="0" cellpadding="0">
   <thead>
      <tr>
         <th scope="col">one</th>
         <th scope="col">two</th>
         <th scope="col">three</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th scope="row">Hello</th>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
      </tr>
   </tbody>
</table>

Duplicates: http://stackoverflow.com/questions/670424/border-around-specific-rows-in-a-table http://stackoverflow.com/questions/583539/set-border-to-table-tr-works-in-everything-except-ie-6-7 http://stackoverflow.com/questions/2238174/border-bottom-for-ie-is-not-working-in-tr — Jørn Schou-Rode, Apr 10 '10 at 09:19

fuxia · Accepted Answer · 2016-05-12T20:47:58.723

55

Add:

table
{
    border-collapse: collapse;
}

Otherwise tr creates no single block.

Simple example:

table
{
  border: 5px solid #900;
  background: #fff;
}
tr
{
  border: 5px solid #090;
}
td
{
  background: #ccc;
  padding: 5px 0;
}

table + table
{
  border-collapse: collapse;
}

<table>
  <tr>
    <td>def</td>
    <td>ault</td>
  </tr>
</table>
<table>
  <tr>
    <td>coll</td>
    <td>apse</td>
  </tr>
</table>

edited May 12 '16 at 20:47

answered Apr 08 '10 at 05:08

fuxia

62,923
6
54
62

first of all you found the solution so I'm accepting your answer – Jitendra Vyas Apr 08 '10 at 05:21
Why does it have to be collapsed? @toscho – Cullub Jan 19 '16 at 12:58
OK, yeah :D - I asked the wrong question :) What does collapsing the table mean/do? – Cullub Jan 19 '16 at 13:14
2

@cullub I have added a link to the spec. It is explained with illustrations there. – fuxia Jan 19 '16 at 13:20

score 9 · Answer 2 · answered Apr 08 '10 at 05:08

9

Try giving

table tr th {border-bottom:1px solid #008999}

Then you can use

table { border-collapse: collapse; }
table tr {border-bottom:1px solid #008999; }

See The collapsing border model

answered Apr 08 '10 at 05:08

rahul

184,426
49
232
263

@metal-gear-solid: What exactly are you trying to achieve? Can you describe the visual result you wish to see? – Raul Agrait Apr 08 '10 at 05:21
@raul - see this `table tr {border-bottom:1px solid #008999}` it means every `TR` in `table` should have border with `1px` height `solid` and in this color `#008999`. What is not clear? – Jitendra Vyas Apr 08 '10 at 05:23

score 3 · Answer 3 · answered May 13 '12 at 18:15

3

tr by definition wont take border styles. You need to apply it to the td's within it:

table tr td {border-bottom:1px solid #008999}

answered May 13 '12 at 18:15

sandyiit

1,597
3
17
23

Why TR not taking style?

3 Answers3

Linked