Is this possible via CSS?
I'm trying
tr.classname {
border-spacing: 5em;
}
to no avail. Maybe I'm doing something wrong?
You need to use padding on your td
elements. Something like this should do the trick. You can, of course, get the same result using a top padding instead of a bottom padding.
In the CSS code below, the greater-than sign means that the padding is only applied to td
elements that are direct children to tr
elements with the class spaceUnder
. This will make it possible to use nested tables. (Cell C and D in the example code.) I'm not too sure about browser support for the direct child selector (think IE 6), but it shouldn't break the code in any modern browsers.
/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */
tr.spaceUnder>td {
padding-bottom: 1em;
}
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr class="spaceUnder">
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
This should render somewhat like this:
+---+---+
| A | B |
+---+---+
| C | D |
| | |
+---+---+
| E | F |
+---+---+
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>
Take a look at the border-collapse: separate attribute (default) and the border-spacing property.
First, you have to seperate them with border-collapse, then you can define the space between columns and rows with border-spacing .
Both of these CSS properties are actually well-supported on every browser, see here.
table {border-collapse: separate; border-spacing: 10px 20px;}
table,
table td,
table th {border: 1px solid black;}
<table>
<tr>
<td>Some text - 1</td>
<td>Some text - 1</td>
</tr>
<tr>
<td>Some text - 2</td>
<td>Some text - 2</td>
</tr>
<tr>
<td>Some text - 3</td>
<td>Some text - 3</td>
</tr>
</table>
You need to set border-collapse: separate;
on the table; most browser default stylesheets start at border-collapse: collapse;
, which ditches border spacing.
Also, border-spacing: goes on the TD
, not the TR
.
Try:
<html><head><style type="text/css">
#ex { border-collapse: separate; }
#ex td { border-spacing: 1em; }
</style></head><body>
<table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>
Best way is to add <td>
with a height
attribute:
<td height="50" colspan="2"></td>
You can read more about colspan
here.
In the following example, our table is green and our td
with the height
attribute is yellow:
<table style="background-color: green">
<tr>
<td>
<span>Lorem</span>
</td>
<td>
<span>Ipsum</span>
</td>
</tr>
<tr>
<td height="50" colspan="2" style="background-color: yellow"></td>
</tr>
<tr>
<td>
<span>Sit</span>
</td>
<td>
<span>Amet</span>
</td>
</tr>
</table>
I realize this is an answer to an old thread and may not be the solution requested, but while all the suggested solutions did not do what I needed, this solution worked for me.
I had 2 table cells, one with background color, the other with a border color. The above solutions remove the border, so the cell on the right would appear to be floating in mid-air.
The solution that did the trick was to replace the table
, tr
and td
with divs and corresponding classes: table would be div id="table_replacer"
, tr would be div class="tr_replacer"
and td would be div class="td_replacer"
(change closing tags to divs as well obviously)
To get the solution for my problem the css is:
#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}
Hope this helps someone.
You can fill the <td/> elements with <div/> elements, and apply any margin to those divs that you like. For a visual space between the rows, you can use a repeating background image on the <tr/> element. (This was the solution I just used today, and it appears to work in both IE6 and FireFox 3, though I didn't test it any further.)
Also, if you're averse to modifying your server code to put <div/>s inside the <td/>s, you can use jQuery (or something similar) to dynamically wrap the <td/> contents in a <div/>, enabling you to apply the CSS as desired.
Here's a simple and elegant solution, with a few caveats:
With that in mind, try this:
td {padding:5px 8px;border:2px solid blue;background:#E0E0E0} /* lets say the cells all have this padding and border, and the gaps should be white */
tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
content:"";
display:block;
position:relative;
z-index:1;
width:auto;
height:0;
padding:0;
margin:-5px -10px 5px; /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
border-top:16px solid white; /* the size & color of the gap you want */
border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}
What you're actually doing is sticking a rectangular ::before
block into the top of all the cells in the row you want preceded by a gap. These blocks stick out of the cells a bit to overlap the existing borders, hiding them. These blocks are just a top and bottom border sandwiched together: The top border forms the gap, and the bottom border re-creates the appearance of the cells' original top border.
Note that if you have a border around the table itself as well as the cells, you'll need to further increase the horizontal -ve margin of of your 'blocks'. So for a 4px table border, you'd instead use:
margin:-5px -12px 5px; /* 14px = original 10px + 2px for 'uncollapsed' part of table border */
And if your table uses border-collapse:separate
instead of border-collapse:collapse
, then you'll need to (a) use the full table border width:
margin:-5px -14px 5px; /* 14px = original 10px + 4px full width of table border */
... and also (b) replace the double-width of border that now needs to appear below the gap:
border-bottom:4px solid blue; /* i.e. 4px = cell top border + previous row's bottom border */
The technique is easily adapted to a .gapafter version, if you prefer, or to creating vertical (column) gaps instead of row gaps.
Here's a codepen where you can see it in action: https://codepen.io/anon/pen/agqPpW
border-spacing
is an attribute related totable
and nottr
. Trytable.classname {border-spacing:5em}
.Note
: IE8 supports the border-spacing property if a !DOCTYPE is specified. – Varun Natraaj