I am having trouble figuring out what I'm doing wrong... I'm trying to do something that should be simple--change the border color of an entire row when the user hovers over the row.
For the table, I'm using the following CSS code:
.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }
.sch tr:hover{ border-color: red; }
<table class='sch'>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>
The issue is that, when you hover over the second or third row, the top bar of the border remains black, while the sides and bottom change to red. Only the top row changes to red all the way around.
I suspect that this has to do with the bottom of the previous row somehow covering up the red of the hover, but I've tried about everything--except the right answer---to fix it.
Thanks for your help!
border-collapse: collapse; is a culprit here.
It is related to the fact that the top cell bottom border is on top of the bottom cell top border. If you make top cell bottom border as none then you will see all borders properly being set to red.
Look at this interactive example in MDN to see exactly what happens
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
This appears to be tricky to implement without JavaScript.
This is a solution using jQuery:
$(".sch tr").hover(function(){
$(this).css("border-color", "red");
$(this).prev().css("border-bottom-width", "0");
}, function(){
$(this).css("border-color", "#000000");
$(this).prev().css("border-bottom-width", "2px");
});
.sch{ border-collapse: collapse; width:97%; margin: 0 auto; margin-top:30px; }
.sch tr{ border: 2px solid #000000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='sch'>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>
If you want to use CSS and HTML only, you can use such not the best but working solution.
CSS-file:
.sch {
width:97%;
margin: 0 auto;
margin-top:30px;
border-collapse: collapse;
}
tr {
border: 2px solid #000000;
}
.sch tr:hover {
border-color: red;
border-bottom-width: 2px;
}
tr:nth-child(3) {
border-bottom-width: 0;
}
tr:nth-last-child(1) {
border-bottom-width: 2px;
}
HTML-file:
<table class='sch'>
<tr>
<td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td>
</tr>
<tr>
<td>Test</td><td>Test</td>
</tr>
</table>
In the example below, there is a border on top of the right cell. It only appears in Chrome, is it a Chrome bug?
HTML / CSS
html,
body {
height: 100%;
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
.left {
border-right: 1px #aaaaaa solid;
border-top: 1px #aaaaaa solid;
}
<table>
<tr>
<td colspan=2>top</td>
</tr>
<tr>
<td class="left">left</td>
<td>right</td>
</tr>
</table>
Here is the example as a fiddle.
Chrome Screenshot
This appears to be the same bug listed here (or similar)
An easy workaround is at the bottom of this answer.
This is a relevant comment under that bug report:
It's a known (old) issue in our table code. Collapsing borders are
determined based on adjacent cells and our code doesn't deal correctly
with spanning cells (we only consider the cell adjoining the first row
/ column in a row / column span). On top of that, our border
granularity is determined by the cell's span.
To fix this bug, we would need to overhaul our collapsing border code,
which is a big undertaking.
Here is an example that highlights the same problem:
html,
body {
height: 100%;
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
.left {
border-right: 1px #aaaaaa solid;
border-top: 1px #aaaaaa solid;
}
.right {
border-top: double 20px #F00;
}
<table>
<tr>
<td colspan=2>top</td>
</tr>
<tr>
<td class="left">left</td>
<td class="right">right</td>
</tr>
</table>
I added this:
.right { border-top: double 20px #F00; }
Which results in this in Chrome:
That grey border would not be between the double red border if it was not a bug.
For comparison, this is how it should look (taken in Firefox):
Here are the rules of border conflicts:
Rule 1: You do not talk about border conflicts
The following rules determine which border style "wins" in case of a conflict:
Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.
Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.)
If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.
If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.
Workaround
Here is a workaround, just don't use border-collapse: collapse:
table {
border-collapse: separate; /* the default option */
border-spacing: 0; /* remove border gaps */
}
td {
padding: 20px;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
td:first-child {
border-left: solid 1px #CCC;
}
table {
border-top: solid 1px #CCC
}
<table>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
table {
border-collapse: separate; /* the default option */
border-spacing: 0; /* remove border gaps */
}
td {
padding: 20px;
border-right: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
td:first-child {
border-left: solid 1px #CCC;
}
table {
border-top: solid 1px #CCC
}
Since its a Chrome-Bug let's think up a workaround. So far I only came up with one that involves changing the html:
http://jsfiddle.net/5366whmf/24/
It adds another row:
<table style="border-collapse: collapse">
<tr><td colspan=2>top</td></tr>
<tr><td style="height: 0"></td></tr> <!-- fix for chrome -->
<tr><td style="border-top: 1px solid red">left</td><td>right</td></tr>
</table>
I have a table of 3 by 3. I need a way to add a border for the bottom of every row tr and give it a specific color.
First I tried the direct way, i.e.:
<tr style="border-bottom:1pt solid black;">
But that didn't work. So I added CSS like this:
tr {
border-bottom: 1pt solid black;
}
That still didn't work.
I would prefer to use CSS because then I don't need to add a style attribute to every row.
I haven't added a border attribute to the <table>. I hope that that is not affecting my CSS.
Add border-collapse:collapse to your table rule:
table {
border-collapse: collapse;
}
Example
table {
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid black;
}
<table>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
Link
I had a problem like this before. I don't think tr can take a border styling directly. My workaround was to style the tds in the row:
<tr class="border_bottom">
CSS:
tr.border_bottom td {
border-bottom: 1px solid black;
}
Use border-collapse:collapse on table and border-bottom: 1pt solid black; on the tr
Use
border-collapse:collapse as Nathan wrote and you need to set
td { border-bottom: 1px solid #000; }
There are lot of incomplete answers here. Since you cannot apply a border to tr tag, you need to apply it to the td or th tags like so:
td {
border-bottom: 1pt solid black;
}
Doing this will leave a small space between each td, which is likely not desirable if you want the border to appear as though it is the tr tag. In order to "fill in the gaps" so to speak, you need to utilize the border-collapse property on the table element and set its value to collapse, like so:
table {
border-collapse: collapse;
}
You can use the box-shadow property to fake a border of a tr element. Adjust Y position of box-shadow (below represented as 2px) to adjust thickness.
tr {
-webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}
I tried adding
table {
border-collapse: collapse;
}
alongside the
tr {
bottom-border: 2pt solid #color;
}
and then commented out border-collapse to see what worked. Just having the tr selector with bottom-border property worked for me!
No Border CSS ex.
No Border Photo live
CSS Border ex.
Table with Border photo live
Use
table{border-collapse:collapse}
tr{border-top:thin solid}
Replace "thin solid" with CSS properties.
Display the row as a block.
tr {
display: block;
border-bottom: 1px solid #000;
}
and to display alternate colors simply:
tr.oddrow {
display: block;
border-bottom: 1px solid #F00;
}
Another solution to this is border-spacing property:
table td {
border-bottom: 2px solid black;
}
table {
border-spacing: 0px;
}
<table>
<tr>
<td>ABC</td>
<td>XYZ</td>
</table>
If you don't want to
enforce border collapse on the table
use the TD elements styling
You can use the ::after selector to add borders to TR :
table tbody tr {
position : relative; # to contain the ::after element within the table-row
}
table tbody tr td {
position : relative; # needed to apply a z-index
z-index : 2; # needs to be higher than the z-index on the tr::after element
}
table tbody tr::after {
content : '';
position : absolute;
z-index : 1; # Add a z-index below z-index on TD so you can still select data from your table rows :)
top : 0px;
left : 0px;
width : 100%;
height : 100%;
border : 1px solid green; # Style your border here, choose if you want a border bottom, top, left, etc ...
}
It is a simple trick that I used in a scenario where I had to put spaces between table-rows so I wasn't able to add a border collapse on the table, the end result :
Hope it helps :)
I found when using this method that the space between the td elements caused a gap to form in the border, but have no fear...
One way around this:
<tr>
<td>
Example of normal table data
</td>
<td class="end" colspan="/* total number of columns in entire table*/">
/* insert nothing in here */
</td>
</tr>
With the CSS:
td.end{
border:2px solid black;
}
<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">
You can do the same to the whole row as well.
There is border-bottom-style, border-top-style,border-left-style,border-right-style. Or simply border-style that apply to all four borders at once.
You can see (and TRY YOURSELF online) more details here
Several interesting answers. Since you just want a border bottom (or top) here are two more. Assuming you want a blue border 3px thick. In the style section you could add
.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}
In the table code either
<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>
No CSS border bottom:
<table>
<thead>
<tr>
<th>Title</th>
</tr>
<tr>
<th>
<hr>
</th>
</tr>
</thead>
</table>
You can't put a border on a tr element. This worked for me in firefox and IE 11:
<td style='border-bottom:1pt solid black'>
HTML
<tr class="bottom-border">
</tr>
CSS
tr.bottom-border {
border-bottom: 1px solid #222;
}
is there any way to apply to a table cells' both the separate and the collapsed border properties to have collapsed but separated? Thanks
EDIT: this is the wanted result:
Perhaps
table {
border-spacing: 1px 0;
}
The closest I can get is:
table {
border-collapse: separate;
border-spacing: 4px 0;
}
table td, table th {
border: 1px solid black;
}
Unfortunately, this will create a double-thick line between the rows. Negative values are not allowed in the border-spacing property, otherwise -1px would probably work.
You could make the other lines 2px wide if that is acceptable, then at least you wouldn't have differing border thicknesses:
table {
border-collapse: separate;
border-spacing: 4px 0;
}
table td, table th {
border-width: 1px 2px;
border-style: solid;
border-color: black;
}
table tr:first-child th,
table tr:first-child td {
border-top-width: 2px;
}
table tr:last-child th,
table tr:last-child td {
border-bottom-width: 2px;
}
This can be achieved without using extra div elements in the th & td cells. This solution works in Chrome, Firefox and IE8+.
CSS
table
{
border-collapse: separate;
border-spacing: 10px 0px;
}
td, th
{
padding: 10px;
border: 1px solid #000;
border-top: none;
}
table tr:first-child th
{
border-top: 1px solid #000;
}
Change table tr:first-child th to table tr:first-child td if the table's first row doesn't contain table header cells (TH).
See my jsfiddle here: Table with column spacing but collapsed row border
No, the border-collapse does not allow for separate defining of the horizontal and vertical. You can achieve it with extra markup (which, on a table, could end up being a lot of extra markup), so I don't advise it, but I will give the code for it:
Html:
<table>
<tr>
<th><div>Header 1</div></th>
<th><div>Header 2</div></th>
</tr>
<tr>
<td><div>Content 1</div></td>
<td><div>Content 2</div></td>
</tr>
<tr>
<td><div>Content 3</div></td>
<td><div>Content 4</div></td>
</tr>
</table>
And css:
table {border-collapse: collapse;}
th, td { border: 0; padding: 0;}
th div, td div {margin: 5px 0 0; border: 1px solid #ff0000; padding: 5px;}
Of course, you may want to use a class on the div or a child selector, some way of only targeting the div if you might have other div's in the table data. The margin controls your horizontal gap, and of course, your padding or border width can be whatever you want.
Is this what you're looking for?
table {
border: 1px solid black;
}
table td {
border: 1px solid red;
margin: 3px;
}
It doesn't use the border-collapse property, but it creates an outer table border with each <td> in its own separate border.
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 |
+---+---+
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.
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.
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>
You may try to add separator row:
html:
<tr class="separator" />
css:
table tr.separator { height: 10px; }
You can't change the margin of a table cell. But you CAN change the padding. Change the padding of the TD, which will make the cell larger and push the text away from the side with the increased padding. If you have border lines, however, it still won't be exactly what you want.
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>
Ok, you can do
tr.classname td {background-color:red; border-bottom: 5em solid white}
Make sure the background color is set on the td rather than the row. This should work across most browsers... (Chrome, ie & ff tested)
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>
You can use line-height in the table:
<table style="width: 400px; line-height:50px;">
tr {
display: block;
margin-bottom: 5px;
}
A too late answer :)
If you apply float to tr elements, you can space between two rows with margin attribute.
table tr{
float: left
width: 100%;
}
tr.classname {
margin-bottom:5px;
}
For creating an illusion of spacing between rows, apply background color to row and then create a thick border with white color so that a "space" is created :)
tr
{
background-color: #FFD700;
border: 10px solid white;
}
I stumbled upon this while struggling with a similar issue. I've found Varun Natraaj's answer to be quite helpful, but I would use a transparent border instead.
td { border: 1em solid transparent; }
Transparent borders still have width.
The correct way to give spacing for tables is to use cellpadding and cellspacing e.g.
<table cellpadding="4">
Works for most latest browsers in 2015. Simple solution. It doesn't work for transparent, but unlike Thoronwen's answer, I can't get transparent to render with any size.
tr {
border-bottom:5em solid white;
}
table { border-collapse: separate; border-spacing: 0 1em; }
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>
Simply put div inside the td and set the following styles of div:
margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;
you can do something like on your table :
table {
border-collapse: separate;
border-spacing: 0 15px;
}
table selective: as it will select all tables, so if you want to select single table you can do likewise
<table class="res">
</table>
For the above html you can do like this, note that for specific table if you want then you can use the below approach.
.res {
border-collapse: separate;
border-spacing: 0 15px;
}
Reference:https://www.w3docs.com/snippets/css/how-to-create-space-between-rows-in-the-table.html
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.
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.
The appearance of a row gap can be achieved by using a bottom border on the cells where there should be the next gap, i.e. border-bottom:solid white 5px;
Here is the code to create the screenshot:
<style>
table.class1 {
text-align:center;
border-spacing:0 0px;
font-family:Calibri, sans-serif;
}
table.class1 tr:first-child {
background-color:#F8F8F8; /* header row color */
}
table.class1 tr > td {
/* firefox has a problem rounding the bottom corners if the entire row is colored */
/* hence the color is applied to each cell */
background-color:#BDE5F8;
}
table.class1 th {
border:solid #A6A6A6 1px;
border-bottom-width:0px; /* otherwise borders are doubled-up */
border-right-width:0px;
padding:5px;
}
table.class1 th:first-child {
border-radius: 5px 0 0 0;
}
table.class1 th.last {
border-right-width:1px;
border-radius: 0 5px 0 0;
}
/* round the bottom corners */
table.class1 tr:last-child > td:first-child {
border-radius: 0 0 0 5px;
}
table.class1 tr:last-child > td:last-child {
border-radius: 0 0 5px 0;
}
/* put a line at the start of each new group */
td.newgroup {
border-top:solid #AAA 1px;
}
/* this has to match the parent element background-color */
/* increase or decrease the amount of space by changing 5px */
td.endgroup {
border-bottom:solid white 5px;
}
</style>
<table class="class1">
<tr><th>Group</th><th>Item</th><th class="last">Row</th></tr>
<tr><td class="newgroup endgroup">G-1</td><td class="newgroup endgroup">a1</td><td class="newgroup endgroup">1</td></tr>
<tr><td class="newgroup">G-2</td><td class="newgroup">b1</td><td class="newgroup">2</td></tr>
<tr><td>G-2</td><td>b2</td><td>3</td></tr>
<tr><td class="endgroup">G-2</td><td class="endgroup">b3</td><td class="endgroup">4</td></tr>
<tr><td class="newgroup">G-3</td><td class="newgroup">c1</td><td class="newgroup">5</td></tr>
<tr><td>G-3</td><td>c2</td><td>6</td></tr>
</table>
.table {
border-collapse: separate;
border-spacing: 0 1rem;
}
This works well for me to give a vertical margin/spacing between tables.
Reference: https://www.w3docs.com/snippets/css/how-to-create-space-between-rows-in-the-table.html
Modern solution involving display:grid with grid-gap.
A modern solution to create a table would be using CSS grid or flexbox.
To add space between rows and columns, one can use grid-gap: [vertical] [horizontal].
To prevent "too thick / double border" with zero grid-gap, one can add margin: -1px to the cell styling. Worth noticing: you will need this hack only if you have both borders and grid-gap of zero.
my-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px 0px;
}
my-item {
border: 2px solid #c60965;
background: #ffc000;
color: #c60965;
margin: -1px;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
}
<my-grid>
<my-item>1</my-item>
<my-item>2</my-item>
<my-item>3</my-item>
<my-item>4</my-item>
<my-item>5</my-item>
</my-grid>
Space between columns is achieved in the same way. For example, 20px space between columns and 10px space between rows is done with this syntax: grid-gap: 10px 20px;.
Space inside rows / columns is achieved with paddings.
Tweakable demo
Below is an interactive demo, where you can tweak grid-gap, padding and turn on/off margin hack to see what changes.
Bonus: at the bottom you can find what code to insert for such behavior (regarding grid-gap, padding and margin hack)
<style>my-grid{display: grid; grid-template-columns: 1fr 1fr;}my-item{border: 2px solid #c60965; background: #ffc000; color: #c60965; margin: -1px; font-size: 20px; display: flex;}cus{font-family:Menlo; display:block; padding:7px; margin-top: 20px; border:3px dotted grey; border-radius:20px; font-size:14px;}set{display:flex; align-items:center;}dev-grid{display:grid; grid-template-columns: 1fr 1fr; margin:5px;}.hack{transform: scale(1.3); margin-top:13px; margin-left:5px;}txt:last-of-type{display:inline-block; margin-top:10px;}d{display:block; margin-top:10px; font-family: Menlo;}pre{padding:10px; background:rgb(246,246,246);}</style><my-grid> <my-item>Cell number one</my-item> <my-item>Cell number two</my-item> <my-item>Cell number three</my-item> <my-item>Cell number four</my-item> <my-item>Cell number five</my-item></my-grid><cus><dev-grid><txt>Space between rows:</txt><input type="range" min="0" max="20" value="0"><txt>Space between cols:</txt><input type="range" min="0" max="20" value="0"><txt>Padding (rows)</txt><input type="range" min="0" max="20" value="0"><txt>Padding (cols):</txt><input type="range" min="0" max="20" value="0"><txt>Margin hack:</txt><label> <input class="hack" type="checkbox" checked> <tt>on</tt></label></dev-grid></cus><d>Code to implement this:</d><pre></pre><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>var values=[0,0,0,0],hack=0,props={grid:{dis:"display:grid;",cols:"grid-template-columns: 1fr 1fr;"},item:{}};function drawProps(){grid_props=Object.values(props.grid).map(p=>` ${p}`).join("\n"),item_props=Object.values(props.item).map(p=>` ${p}`).join("\n"),all_code=`my-grid{\n${grid_props}\n}`,""!=item_props&&(all_code+=`\nmy-item{\n${item_props}\n}`),$("pre").text(all_code)}props.item.hack="margin: -1px;",drawProps(),$("input[type=range]").on("input",function(){ind=($(this).index()-1)/2,values[ind]=$(this).val(),$("my-grid").css("grid-gap",`${values[0]}px ${values[1]}px`),$("my-item").css("padding",`${values[2]}px ${values[3]}px ${values[2]}px ${values[3]}px`),code_grid=`grid-gap: ${values[0]}px ${values[1]}px;`,values[0]==values[1]&&(code_grid=`grid-gap: ${values[0]}px;`,0==values[0]&&(code_grid="")),code_padding=`padding: ${values[2]}px ${values[3]}px ${values[2]}px ${values[3]}px;`,values[2]==values[3]&&(code_padding=`padding: ${values[2]}px;`,0==values[2]&&(code_padding="")),props.grid.gap=code_grid,props.item.padding=code_padding,""==props.grid.gap&&delete props.grid.gap,""==props.item.padding&&delete props.item.padding,drawProps()}),$(".hack").change(function(){hack=$(this).is(":checked"),st=hack?"on":"off",$("tt").text(st),hack?(props.item.hack="margin: -1px;",$("my-item").css("margin","-1px")):(props.item.hack&&delete props.item.hack,$("my-item").css("margin","0px")),drawProps()});</script>
Here's a simple and elegant solution, with a few caveats:
You can't actually make the gaps transparent, you need to give them a specific color.
You can't round the corners of the borders above & below the gaps
You need to know the padding and borders of your table cells
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
Here this works smoothly:
#myOwnTable td { padding: 6px 0 6px 0;}
I suppose you could work out a more finely-grained layout by specifying which td if need be.
doing this shown above...
table tr{ float: left width: 100%; } tr.classname { margin-bottom:5px; }
removes vertical column alignment so be careful how you use it
Have you tried:
tr.classname { margin-bottom:5em; }
Alternatively, each td can be adjusted as well:
td.classname { margin-bottom:5em; }
or
td.classname { padding-bottom:5em; }