Table Border is Not working : Table Row (tr) Border is not appear using css

Question

Here is my Stylesheet

<style>
table tr{ border:1px solid #F00 ;  }
table td{ padding:20px; }
</style>

Here is a HTML CODE :

<table class="" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>Test</td>
    <td>testing</td>
</tr>
</table>

Here is a Fiddle link for live preview. http://jsfiddle.net/Husen/tL7wK/

misterManSam · Answer 1 · 2018-02-06T00:46:07.337

9

Remove the tables border attribute.

Add border-collapse: collapse; to your CSS. This will allow a border for the tr :)

table {
  border-collapse: collapse;
}

table tr {
  border: 1px solid #F00;
  border-top: 1px solid #0F0;
}

table td {
  padding: 20px;
}

<table>
  <tr>
    <td>Test</td>
    <td>testing</td>
  </tr>
</table>

edited Feb 06 '18 at 00:46

answered Jun 05 '14 at 06:50

misterManSam

Amazing!!! this works fine, but not compatible with IE7 :(, but, works well with rest browsers. Do you have hack or code for IE7? – Husen Jun 05 '14 at 07:00
Not working , but, i've find a solution like this : http://jsfiddle.net/Husen/tL7wK/11/ – Husen Jun 05 '14 at 07:21

score 3 · Accepted Answer · edited Feb 06 '18 at 00:43

3

You need to add border to td for example:

<style>
table td{ padding:20px; border:1px solid #F00 ; }
</style>

Or you can add border to the table: like this:

table{ border:1px solid #F00 ;  }
table td{ padding:20px; }

If you want only row border effect you can try this:

table td{
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    padding:20px; 
 }

 table{ border:1px solid #F00 ;  }

edited Feb 06 '18 at 00:43

misterManSam

answered Jun 05 '14 at 06:47

Thanks for the reply, but, i need rowwise border only, not cellwise – Husen Jun 05 '14 at 06:49
see my update please demo3 @Husen – Alessandro Minoccheri Jun 05 '14 at 06:51
my demo3 works on all version of IE @Husen – Alessandro Minoccheri Jun 05 '14 at 07:03
Hey, this is a pretty cool solution, even works fine with IE7. But we can not give table{ border:1px solid #F00 ; } otherwise there will be double border come at top and bottom row. I am posting the final solution here. – Husen Jun 05 '14 at 07:06
Here is the fiddle link for final solution brother http://jsfiddle.net/Husen/tL7wK/12/ – Husen Jun 05 '14 at 07:18

score 1 · Answer 3 · answered Jun 05 '14 at 06:48

1

try something like this

table td{ border:1px solid #F00 ;padding:20px;  }

answered Jun 05 '14 at 06:48

rajesh kakawat

3 Answers3