Is it possible set some rows' space in a table, but not inserting a dummy row?

Question

I intend to add space between some rows.

My original table

The result should like this:

http://jsbin.com/xojurorani/1/edit?html,output

<table><tr></tr></table>

Thanks.

Update: I only want to add space between some specific rows, some kind of grouping, but border-spacing will add space to every rows.

padding can only to cell, which cause a higher rows, but not space between rows.

possible duplicate of: http://stackoverflow.com/questions/351058/space-between-two-rows-in-a-table — Mart, Feb 14 '17 at 17:00
Possible duplicate of [Space between two rows in a table?](http://stackoverflow.com/questions/351058/space-between-two-rows-in-a-table) — isherwood, Feb 14 '17 at 17:15
@thermostat, you seem to have edited your question as an anonymous user. Please log in and try again. — isherwood, Feb 14 '17 at 17:40

Rahul · Accepted Answer · 2017-02-14T17:31:13.450

Check this out.

table{
  border: 1px solid #121212;
  border-collapse: separate;
}
tr{
  display: block;
}
tr:nth-child(2n+2){
  padding-bottom: 10px;
}
td{
  border-color: #121212;
  border-style: solid;
  border-width: 1px 1px 1px 0;
  border-spacing: 0 5px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table cellspacing="0">
  <tr>   
    <td width="100" scope="col">a&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
  </tr>
  <tr>   
    <td width="100" scope="col">a&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
  </tr>
  <tr>   
    <td width="100" scope="col">a&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
  </tr>
  <tr>   
    <td width="100" scope="col">a&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
  </tr>
  <tr>   
    <td width="100" scope="col">a&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
  </tr>
  <tr>   
    <td width="100" scope="col">a&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
  </tr>
  <tr>   
    <td width="100" scope="col">a&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
  </tr>
  <tr>   
    <td width="100" scope="col">a&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
    <td width="100" scope="col">&nbsp;</td>
  </tr>
  
</table>
<p>&nbsp;</p>
</body>
</html>

Now it work properly.

just tr{ display: block;} then tr:nth-child(2n+2){padding-bottom: 10px;}

Is it possible set some rows' space in a table, but not inserting a dummy row?

1 Answers1