html - How can I set border and padding to the table rows? -


i add divisions , padding between rows, i've noticed row borders displayed border-collapse: collapse, removes padding <tr> element. https://jsfiddle.net/c8ht9aso/

<table style="border: 1px solid red; border-collapse: collapse; padding: 20px">     <tr>         <td>header</td>     </tr>     <tr style="border-top:1px solid blue; vertical-align: top; padding: 20px">         <td>cell</td>     </tr>     <tr style="border-top:1px solid green; vertical-align: top; padding: 20px">         <td>another cell</td>     </tr> </table>     

so remove border-collapse: collapse , can see padding, not horizontal lines between rows: https://jsfiddle.net/0mecu52u/

<table style="border: 1px solid red; padding: 20px">     <tr>         <td>header</td>     </tr>     <tr style="border-top:1px solid blue; vertical-align: top; padding: 20px">         <td>cell</td>     </tr>     <tr style="border-top:1px solid green; vertical-align: top; padding: 20px">         <td>another cell</td>     </tr> </table>     

so how can add border , padding <tr>?

thanks.

if want set both border , padding in table layout, it's better set on td rather tr, make sure work across browsers correctly.

table {      border: 1px solid red;      border-collapse: collapse;  }  td {      vertical-align: top;      padding: 20px;  }  tr:nth-child(1) td {      border-bottom: 1px solid blue;  }  tr:nth-child(2) td {      border-bottom: 1px solid green;  }
<table>      <tr>          <td>header</td>      </tr>      <tr>          <td>cell</td>      </tr>      <tr>          <td>another cell</td>      </tr>  </table>


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -