padded border or hr on the bottom of each row

Question

Is there an easier way, without any sort of hacks, to get it to visually look like this (a bottom border that is padded 10px from each side) without having to create an extra row just for it?

 table { width: 100%; border-collapse: collapse; } td { background: #eee; padding: 0 10px; } 

 <table> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr> <td colspan="5"> <hr style="border-bottom: solid 1px #000; padding: 0 10px"/> </td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <td colspan="5"> <hr style="border-bottom: solid 1px #000; padding: 0 10px"/> </td> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> </table> 

Answer 1

I don't know what you are trying to do, but here's a table that looks the way your example does, only without a nested table.
Is this roughly what you're after?

 table { border-spacing: 0 4px; width: 100%; } td { background: #eee; width:20%; border-bottom: 1px solid #000; } td:first-child { border-left: 10px solid #eee; } td:last-child { border-right: 10px solid #eee; } 

 <table> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> </table> 

Answer 2

I don't really understand what you imply by hacking. But this is a way i could get it done. I hope you find it useful.

 table { border-collapse: collapse; width: 100%; } td { background: #eee; padding: 0 10px; border-bottom: 1px solid #000; position: relative; } td:first-child { padding-left: 10px; } td:first-child:before { left: 0; } td:last-child:after { right: 0; } td:first-child:before, td:last-child:after { content: ''; position: absolute; width: 10px; background: inherit; top: 0; bottom: -1px; } tr:last-of-type td { border-bottom: none; } 

 <table> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> </table> 

Answer 3

You can also use pseudo element to generate empty 10px width cells on each sides .

 table { background: lightgray; border-collapse: collapse; width:100%; } td { padding:0.5em 1em; } table tr td { /* draw borders Hr like via border-style or a mix with border & shadow */ border-top: solid 1px black; box-shadow: inset 0 1px 0 white } /* remove fake hr from first-row */ table tr:first-of-type td { border-top: none; box-shadow: 0 0 } tr:before, tr:after { content: ''; display: table-cell; width: 10px; } 

 <table> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> </table> 

pen to play with

second pen with padding also on td --> hr drawn on tr's bacground.

---

you are using pseudo for something else ?

Make it simple instead complicated.

• set padding on table itself

 table { background: lightgray; border-spacing: 0; table-layout:fixed; width:100%; padding:0 10px; } td { padding:0.5em 1em; } table tr td { /* draw borders Hr like via border-style or a mix with border & shadow */ border-top: solid 1px black; box-shadow: inset 0 1px 0 white } /* remove fake hr from first-row */ table tr:first-of-type td { border-top: none; box-shadow: 0 0 } 

 <table> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> </table> 

pen to play with

• or set borders to table

 table { background: lightgray; border-spacing: 0; table-layout:fixed; width:100%; border-left:solid transparent 10px; border-right:solid transparent 10px; } td { padding:0.5em 1em; } table tr td { /* draw borders Hr like via border-style or a mix with border & shadow */ border-top: solid 1px black; box-shadow: inset 0 1px 0 white } /* remove fake hr from first-row */ table tr:first-of-type td { border-top: none; box-shadow: 0 0 } 

 <table> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> </table> 

• or you can draw it via background and background-size

 table { background: lightgray; border-spacing: 0; box-shadow: 0 0 5px; width: 100%; table-layout:fixed; box-sizing: border-box; padding: 0 10px; /* or use pseudos */ } td { padding: 1em 0; text-align: center; } table tr { background: linear-gradient(black, black) top center no-repeat, linear-gradient(white, white) center 1px no-repeat; background-size: calc(100% - 20px) 1px; /* for a 20px padding */ } table tr:first-of-type { background: none; } /* next is a guess */ td:first-child { padding-left: 10px; text-align: left; } td:last-child { padding-right: 10px; text-align: right; } /* see padding */ td:nth-child(odd) { box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.3); } 

 <table> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> </table> 

Answer 4

I was working on something today and wanted to do exactly what was posted here. I remembered what i posted but decided to try another way. What i did was put the background color on the table itself. Targeted the first and last "td" of every row and made them a block element. I was able to apply a margin to them. Then i had an issue with the targeted "td"s. They weren't aligning with others. I fixed that by negating the position "bottom: -1px". See below. I guess this is another way

 table { border-collapse: collapse; background: #eee; width: 100%; } td { padding: 0 10px; border-bottom: 1px solid #000; position: relative; } tr td:last-of-type, tr td:first-of-type { display: block; bottom: -1px; } tr td:last-of-type { margin-right: 10px; } tr td:first-of-type { margin-left: 10px; padding-left: 0; } tr:last-of-type td { border-bottom: none; } 

 <table> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> </table> 

Answer 5

Using this method,The HTML code has been minimized from 31 lines to around 20 lines.You need to define a Table Border only once in the CSS part and call it as many times as you want in the HTML table.

 table{ width: 100%; border-collapse: collapse; background: #eee; } #border { border-bottom: 1px #000 solid; border-left: 0 10px #eee solid; border-right: 0 10px #eee solid ; } 

 <table> <tr id="border"> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr id="border"> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr id="border"> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> </table> 

Answer 6

You can use below code with less html and css:

table {
 border-collapse:collapse;
 width: 100%; 
}

td {
 background: #eee;  
 border-bottom: 1px solid #000;
 padding:5px 10px
}

tr:last-child td{
 border-bottom:none
}

<table>
 <tr>
 <td>a</td>
 <td>b</td>
 <td>c</td>
 <td>d</td>
 <td>e</td>
</tr>
<tr>
 <td>a</td>
 <td>b</td>
 <td>c</td>
 <td>d</td>
 <td>e</td>
</tr>
<tr>
 <td>a</td>
 <td>b</td>
 <td>c</td>
 <td>d</td>
 <td>e</td>
</tr>
</table>

Answer 7

 table.rowborder{ border-collapse:collapse; width: 100%; } table.rowborder tr td{padding:10px 0;} table.rowborder tr{border-bottom: 1px #000 solid;} table.rowborder tr:last-child{border-bottom: 0px transparent solid;} 

 <table class="rowborder"> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> </tr> </table>