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: stackoverflow.com/questions/670424/… stackoverflow.com/questions/583539/… stackoverflow.com/questions/2238174/… — Jørn Schou-Rode
– Jørn Schou-Rode, Commented Apr 10, 2010 at 9:19

fuxia · Accepted Answer · 2016-05-12 20:47:58Z

62

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, 2016 at 20:47

answered Apr 8, 2010 at 5:08

fuxia

63.7k6 gold badges57 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jitendra Vyas Over a year ago

first of all you found the solution so I'm accepting your answer

Cullub Over a year ago

Why does it have to be collapsed? @toscho

Cullub Over a year ago

OK, yeah :D - I asked the wrong question :) What does collapsing the table mean/do?

fuxia Over a year ago

@cullub I have added a link to the spec. It is explained with illustrations there.

rahul · Accepted Answer · 2010-04-08 05:08:13Z

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 8, 2010 at 5:08

rahul

188k50 gold badges239 silver badges266 bronze badges

2 Comments

Raul Agrait Over a year ago

@metal-gear-solid: What exactly are you trying to achieve? Can you describe the visual result you wish to see?

Jitendra Vyas Over a year ago

@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?

sandyiit · Accepted Answer · 2012-05-13 18:15:15Z

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}

Collectives™ on Stack Overflow

Why TR not taking style?

3 Answers 3

4 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Linked

Related