Advertisement
Advertisement


Space between two rows in a table?


Question

Is this possible via CSS?

I'm trying

tr.classname {
  border-spacing: 5em;
}

to no avail. Maybe I'm doing something wrong?

2020/04/15
1
763
4/15/2020 5:20:08 PM


In the parent table, try setting

border-collapse:separate; 
border-spacing:5em;

Plus a border declaration, and see if this achieves your desired effect. Beware, though, that IE doesn't support the "separated borders" model.

2008/12/08

You have table with id albums with any data... I have omitted the trs and tds

<table id="albums" cellspacing="0">       
</table>

In the css:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

since I have a background image behind the table, faking it with white padding wouldn't work. I opted to put an empty row in-between each row of content:

<tr class="spacer"><td></td></tr>

then use css to give the spacer rows a certain height and transparent background.

2010/08/09

From Mozilla Developer Network:

The border-spacing CSS property specifies the distance between the borders of adjacent cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

That last part is often overseen. Example:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

UPDATE

I now understand that the OP wants specific, seperate rows to have increased spacing. I've added a setup with tbody elements that accomplishes that without ruining the semantics. However, I'm not sure if it is supported on all browsers. I made it in Chrome.

The example below is for showing how you can make it look like the table exists of seperate rows, full blown css sweetness. Also gave the first row more spacing with the tbody setup. Feel free to use!

Support notice: IE8+, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}
<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

2016/12/15

You may try to add separator row:

html:

<tr class="separator" />

css:

table tr.separator { height: 10px; }
2011/08/23

Source: https://stackoverflow.com/questions/351058
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]