CODEWITHSUNDEEP
htmlcss
kurtko
kurtko

Reputation: 2126

Add space and border below to row

I have a table and I need rows with space and border below.

Like this:

enter image description here

I tried to fix it with false white borders and a 'spacer row' with black background but I do not get displayed correctly.

table {
  border-collapse:collapse;  
}
td {
  padding:1em 2em;
  background-color:#ccc; 
  border-top:10px solid white;
  border-bottom:10px solid white;
  border-right:4px solid white;
  text-align:center;
  vertical-align:middle;
}
tr:first-child td {border-top:0}
td:last-child {border-right:0}

tr.spacer {
  height:1px;
  background-color:black;
  border:1px solid black;
}
<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr class="spacer"></tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr class="spacer"></tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
  </tr>
</table>

Any ideas?

Upvotes: 0

Views: 53

Answers (3)

kurtko
kurtko

Reputation: 2126

I have accomplished by putting the background table color as the border. And the 'row spacer' height the same as the fake border plus 1px.

table {
  border-collapse:collapse; 
  background-color:black
}
td {
  padding:1em 2em;
  background-color:#ccc; 
  border-top:10px solid white;
  border-bottom:10px solid white;
  border-right:4px solid white;
  text-align:center;
  vertical-align:middle;
}
tr:first-child td {border-top:0}
td:last-child {border-right:0}

tr.spacer {
  height:11px;  
}
<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr class="spacer"></tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr class="spacer"></tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
  </tr>
</table>

Upvotes: 0

Alex
Alex

Reputation: 9031

Try using :after to add some dummy content and align it:

td:after {
   content: 'border';
    position: absolute;
    bottom: -5px;
    background: red;
    width: 105%;
    left: 0px;
    text-indent:-9999px;
    height:1px;
}

You'll need to make the <td>'s position:relative.

Check it out - https://jsfiddle.net/2j6jqkx2/1/

Upvotes: 1

Dayle Salmon
Dayle Salmon

Reputation: 281

As a quick fix, try...

tr{
padding-bottom: 10px;
margin-bottom:10px;
border-bottom: 1px solid grey;
float: left;}

Oh and get rid of the tr spacer elements.

Upvotes: 0

Related Questions