I am working on my website and I have most of the design worked out, shown in the first image. I am trying to make the header row have no space (more accurately, make it look that way by having the image span across the entire row with no spaces.), but still have the elements themselves have space in between them.
Image showing a joined header, but separate body elements:
I am aware of the border-spacing css style, but it has to be applied to the table element, which means it will apply to headers and body elements. This with with a border-spacing set
Image showing what happens to the images when the border-spacing is set on the table:
I did attempt to find an answer before posting and usually I find the answer fairly quickly, but this one seems to be a rare request. I prefer to avoid hacks if possible, but I will use them if its the only way. Also, if possible, I'd like it to be cross-browser capable. (changes to the solution are ok of course, just something that I can make work will all of them.)
I guess code is helpful to show. Here is the html:
<table id="users">
<caption>Point Totals</caption>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Xogue</td>
<td>64433</td>
</tr>
<tr>
<td>Jesse</td>
<td>104040</td>
</tr>
<tr>
<td>Nanokarp</td>
<td>280</td>
</tr>
<tr>
<td>Brandon</td>
<td>70</td>
</tr>
</tbody>
</body>
and the css:
#users {
border-spacing: 6px;
width: 444px;
float: left;
margin: 20px 90px;
}
#users caption {
background-image: url("_images/points_label.png");
background-size: 200px 35px;
background-position: center center;
background-repeat: no-repeat;
height: 31px;
font-size: 20px;
padding-top: 8px;
}
#users thead {
background-image: url("_images/point_tr_head_back.png");
background-repeat: no-repeat;
}
#users th {
text-align: left;
padding: 9px 30px;
font-size: 20px;
}
#users td {
border: 2px solid #226fdb;
border-radius: 25px;
font-size: 20px;
padding: 18px 5px 2px 25px;
line-height: 15px;
background: #FFFFFFEE;
}
Note: Some of the styles used are likely unnecessary. I've been toying with it for a while and haven't cleaned it up yet.
SOLVED: further down if you would like to see the example. but put simply, wrap the content in a different element (like a span) and move all styles to the new element.
I think you could get there fairly easily with some margins and padding if you can wrap the cell contents in a span (or whatever).
table {
text-align: left;
border-spacing: 0;
}
thead tr {
box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
border-radius: 24px;
}
th {
padding: 6px 1em;
}
th:first-child {
border-radius: 24px 0 0 24px;
}
th:last-child {
border-radius: 0 24px 24px 0;
}
tbody td > span {
display: block;
border: 2px solid blue;
background: aliceblue;
border-radius: 24px;
margin: 6px 6px 0 0;
padding: 0.25em 1em;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</thead>
<tbody>
<tr>
<td><span>Xogue</span></td>
<td><span>262677</span></td>
</tr>
<tr>
<td><span>Jesse</span></td>
<td><span>17632</span></td>
</tr>
<tr>
<td><span>Nanokarp</span></td>
<td><span>12344</span></td>
</tr>
</tbody>
</table>
One option is to add padding to your CSS for td only and keep rest of the attributes same among td and th as below, also if you can share the used code snippet someone can help better:
td {
padding: 5px;
}
If we want to achieve the following, i.e. style the border in such a way that the border will have the thick right bottom corner and upon hover show a plus sign.
What I have done: I have done selection of cells in tables. Normal borders. Even tried border styling, but most of which is rounded or cut-off borders, which is not of use here.
What I am trying to do: I am trying to mimic series fill functionality of excel in html table. Functionality is not a problem. I am just trying to get the styling of these borders right so that it is easier to comprehend.
So, How can we customize the border to get the desired effect only using css and html?
select.js
$(function () {
$('td').click(function () {
$(this).toggleClass('highlight');
});
});
table.html
<table border="1" cellpadding="15">
<tbody>
<tr>
<td>23</td>
<td>57</td>
<td>62</td>
</tr>
</tbody>
</table>
table.css
.highlight {
border-radius: 0px 0px 5px 5px;
border: 2px solid black;
}
Edit
I went back and added a different behavior to each cell after looking at ther image I believe I understand now See updated Snippet.
It has been brought to my attention that you probably don't want every cell that way (I tend to go into automatic coding, like a robot 🤖.) I modified it so that the last cell will have the div.pad.
Did you mean a square on every cell or just the table? If the latter, let me know, it's an easy adjustment. I used
position: relative and absolute
z-index
border-collapse: separate
border-spacing, border, and outline
Pseudo-elements ::before and ::after
2 unicode entities \1f4c4 📄 and \2795 ➕
and the pseudo-class :hover of course.
Added tr:last-of-type td:last-of-type to single out the last cell.
It looks bulky because there's no dimensions mentioned, but that's fine since the bulkiness highlights the styles and how they interact. Each square is a div that is a child of a cell (<td>). Making the cells relative whilst the divs are absolute allows us to give it coordinates in relation to the <td> edges. Once positioned in the bottom right corner, we give the div some dynamic content that appears on :hover. When :hovered upon, the pseudo-elements ::before and ::after appear. They to are positioned, but with a relative value because we want to move the fonts of ::before and ::after relative to their original position, rather than to another positioned element (like we did previously with each<td> and div.
Special note on the div.pad's styling.
position:absolute allowed us to easily pick the bottom right corner. If bottom:0 and right:0 puts .pad snugly into the corner, then we can continue going forward with negative length values in order for .pad to sit halfway in and halfway out of cell/table borders.
Added outline:2px solid white instead of border because unlike border, outline width doesn't displace other elements in the layout. The white color is to blend into the background giving the appearance of .pad being more of a separate yet related component of the table.
z-index:1 was also given to .pad so that the white outline is clearly defined from the table borders.
The other main points are:
The borders were made so that they were defined as separate properties but appeared as one border (like border-collapse: collapse;) To avoid that disconnected look the border-collapse:separate gives, we use outline to fill in that border-spacing of 1px; if we were to use only borders, the table as a whole would increase noticeably in size. The border and outline styles are inset and the last cell has an over sized outline style outset designating it as highlighted.
SNIPPET
table {
border-collapse: separate;
border-spacing: 1px;
border: 1px inset black;
outline: 1px inset black;
table-layout: fixed;
width: 80vw;
min-height: 150px;
}
td {
border:1px solid black;
outline: 1px inset black;
}
td:hover {
border: -3px inset black;
outline: 6px outset black;
position: relative;
z-index:1;
padding:1px;
}
.pad {
background: black;
cursor: pointer;
position: absolute;
height: 1px;
width: 1px;
z-index: 1;
bottom: -1px;
right: -1px;
}
td:hover .pad,
.pad:hover {
border: 4px solid black;
bottom: -9px;
right: -9px;
outline: 2px solid white;
z-index:2;
padding:2px;
}
.pad:hover::before {
content: '\1f4c4';
position: relative;
top: 20px;
left: 10px;
font-size: 1.2rem;
z-index:2;
}
.pad:hover::after {
content: '\2795';
position: relative;
top: 16px;
left: 24px;
font-size: .7rem;
z-index:2;
}
<table>
<tbody>
<tr>
<td>
<div class='pad'></div>
</td>
<td>
<div class='pad'></div>
</td>
<td>
<div class='pad'></div>
</td>
</tr>
<tr>
<td>
<div class='pad'></div>
</td>
<td>
<div class='pad'></div>
</td>
<td>
<div class='pad'></div>
</td>
</tr>
<tr>
<td>
<div class='pad'></div>
</td>
<td>
<div class='pad'></div>
</td>
<td>
<div class='pad'></div>
</td>
</tr>
</tbody>
</table>
I need to add up-right triangle in a cell.
How to do this?
I tried to add span and icon inside span, but it goes awry
<span style="position: relative;float:right;top:-30px;">#Html.ImageContent("triangle_bonus.png", "")</span>
Using CSS Triangles:
You basically have a 0 height, 0 width element, and use the borders to construct the triangle. Because the line between borders (for example, between top and left) is diagonal, you can create nice looking, solid color triangles with it!
Here's an Example!
HTML:
<table border="1">
<tr>
<td class="note">Triangle!</td>
<td>No Triangle!</td>
</tr>
</table>
CSS:
td {
padding: 20px;
}
.note {
position: relative;
}
.note:after { /* Magic Happens Here!!! */
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
display: block;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
border-top: 20px solid #f00;
} /* </magic> */
Advantages:
No Images! - Meaning, no extra request.
No Additional Markup! - Meaning, you don't litter your HTML with unsemantic markup.
Looks good on all sizes! - Because it renders in the browser, it would look perfect on any size and any resolution.
Disadvantages:
Depends on pseudo-elements - Meaning that lower versions of IE will not display the triangle. If it's critical, you can modify the CSS a bit, and use a <span> in your HTML, instead of relying on :after.
Found this question through Google and ran into issues, so I'll add this here despite the age of original post.
Madara's answer works in most browsers, and works anywhere outside of a table in all browsers. But as mentioned in the comments, the example doesn't work in Firefox.
There's a very old ticket in Bugzilla concerning position:absolute; not working in <td> elements.
The main solution is to add an inner <div>:
HTML:
<table border="1">
<tr>
<td><div class="note">Triangle!</div></td>
<td>No Triangle!</td>
</tr>
</table>
CSS:
td .note {
padding: 20px;
}
jsFiddle example
I did find that it was possible to achieve without an inner <div> but only when the <td> was empty, which probably doesn't help.
To do cell text inside div it good idea. but if you just put extra div for ARROW not for text. because it creates problem when td has given width and height and text stays on TOP with padding-top:20px;.
I found another solution and tested on All major browsers (eg: IF and FF as well)
.arrow-right-1 {
position: absolute;
top: -1px;
right: -5px;
float: right;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid red;
transform: rotate(45deg);
}
td {
border: solid 1px blue;
width: 160px;
height: 100px;
/* padding: 0px !important; */
/* vertical-align: top; */
position: relative;
}
<table class="table">
<tbody>
<tr>
<td>
<div class="arrow-right-1"></div>you can increase or decrease the size of td's height or can put more text
</td>
</tr>
</tbody>
</table>
After some research, I couldn't find an answer to this question. There was this but it didn't really answer my question. I would like to "strikethrough" a complete HTML table row in CSS, not just the text in it. Is it at all possible? From the example that I linked, it seems tr styling doesn't even work in Firefox. (And anyway, text-decoration only applies on text afaik)
Oh yes, yes it is!
CSS:
table {
border-collapse: collapse;
}
td {
position: relative;
padding: 5px 10px;
}
tr.strikeout td:before {
content: " ";
position: absolute;
top: 50%;
left: 0;
border-bottom: 1px solid #111;
width: 100%;
}
HTML:
<table>
<tr>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
<tr class="strikeout">
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
<tr>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
</table>
http://codepen.io/nericksx/pen/CKjbe
My answer (below) said that it is not possible. I was wrong, as pointed out by #NicoleMorganErickson. Please see her answer (and upvote it!) for how to do it. In short, you use :before pseudo-class to create an element that draws a border across the middle of the cell, above the content:
table { border-collapse:collapse } /* Ensure no space between cells */
tr.strikeout td { position:relative } /* Setup a new coordinate system */
tr.strikeout td:before { /* Create a new element that */
content: " "; /* …has no text content */
position: absolute; /* …is absolutely positioned */
left: 0; top: 50%; width: 100%; /* …with the top across the middle */
border-bottom: 1px solid #000; /* …and with a border on the top */
}
(original answer)
No, it is not possible using only CSS and your semantic table markup. As #JMCCreative suggests, it is possible visually using any number of ways to position a line over your row.
I would instead suggest using a combination of color, background-color, font-style:italic and/or text-decoration:line-through to make the entire row obviously different. (I'd personally strongly 'fade out' the text to a color much closer to the background than normal text and make it italic.)
tr {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg==');
background-repeat: repeat-x;
background-position: 50% 50%;
}
I used http://www.patternify.com/ to generate the 1x1 image url.
Edit
In a recent Bootstrap 4.3 ServiceNow Angular.js project, I found myself having to make some changes, and instead used the following CSS, similar to the experience of Revoman:
tr.strikeout td.strike-able:before {
content: " ";
position: absolute;
display: inline-block;
padding: 12px 10px;
left: 0;
border-bottom: 2px solid #d9534f;
width: 100%;
}
Original Post
I like Nicole Morgan Erickson's answer, but it might cause side effects if your implement his solution verbatim. I've add some small tweaks to keep this kosher, below... so that we're not globally modifying every table or every td with this CSS.
I also wanted a button on the row to strike out the row, but I didn't want to strike out the column with the button, for visibility sake. I just wanted to strike out the rest of the row. For this, I made it so that every column that wants to be capable of showing the strike out must declare such by also being marked with a class. In this iteration, you'd need to mark the table as strike-able, and also mark each td as strike-able; but you gain safety by not side effecting any non-strike-able tables, and you gain control of which columns to strike out.
CSS:
table.strike-able {
border-collapse: collapse;
}
table.strike-able tr td {
position: relative;
padding: 3px 2px;
}
table.strike-able tr th {
position: relative;
padding: 3px 2px;
}
table.strike-able tr.strikeout td.strike-able:before {
content: " ";
position: absolute;
top: 50%;
left: 0;
border-bottom: 2px solid #d9534f;
width: 100%;
}
Usage:
<table class="strike-able" id="Medications" data-item-count="#Model.Medications.Count">
<tr>
<th>
Some Column
</th>
<th>
Command Column
</th>
</tr>
<tr class="strikeout">
<td class="strike-able"></td>
<td>Button that Toggles Striking Goes Here (active)</td>
</tr>
<tr>
<td class="strike-able"></td>
<td>Button that Toggles Striking Goes Here</td>
</tr>
</table>
Lastly, since I'm using this with Bootstrap, and treating the deletions as a dangerous thing to do, I've formatted the colors a little to match my use.
EDIT: As pointed out by #Mathieu M-Gosselin in the comments, this actually puts the line behind the text. That said, if your line is the same color as your text or you are using a small-ish font, this still works pretty well.
For what it's worth, here's a pretty effective way to do it in pure CSS without using pseudo elements. You can change the thickness of the strikethrough line by adjusting the background-size.
table {
border-collapse: collapse;
}
td {
width: 100px
}
.strikethrough {
background: repeating-linear-gradient(
180deg,
red 0%,
red 100%
);
background-size: 100% 2px;
background-position: center;
background-repeat: no-repeat;
}
<table>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
<tr class="strikethrough">
<td>Foo Strike</td>
<td>Bar Strike</td>
<td>Baz Strike</td>
</tr>
</table>
#NicoleMorganErickson, I like your answer, but I could not get the strikeout to affect only the applied row. Also, I needed it to be applied multiple rows so I modified your solution down into a single class.
CSS:
tr.strikeout td:before {
content: " ";
position: absolute;
display: inline-block;
padding: 5px 10px;
left: 0;
border-bottom: 1px solid #111;
width: 100%;
}
http://codepen.io/anon/pen/AaFpu
Yes you can. In the first cell of the row you create a div containing a HR. Float the div to the left and specify its width as a % of its containing element, in this case the table cell. It'll stretch as wide as you want across the table cells in that row, even beyond the width of the table if you want.
This works for me:
<style>
.strikeThrough {
height:3px;
color:#ff0000;
background-color:#ff0000;
}
.strikeThroughDiv {
float:left;
width:920%;
position:relative;
top:18px;
border:none;
}
</style>
<table width="900" border="1" cellspacing="0" cellpadding="4">
<tr valign="bottom">
<td>
<div class="strikeThroughDiv"><hr class="strikeThrough"/></div>
One
</td>
<td>
<label for="one"></label>
<input type="text" name="one" id="one" />
</td>
<td>
<label for="list"></label>
<select name="list" id="list">
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three" selected>3</option>
</select>
</td>
<td>
Four
</td>
<td>
Five
</td>
</tr>
</table>
To control the width of your line you have to specify the width of the table cell containing the HR. For styling HR elements they say you shouldn't make it less than 3px in height.
Here's a very simple way that worked for me:
<table>
<tbody style="text-decoration: line-through">
-- Various table body stuff
</tbody> </table>
Not sure but it seems there were other answers mentioning simple and straightforward pure CSS solution...
#Ben Slade's answer is the closest of all, but still...
Just use text-decoration: line-through in your CSS! Add corresponding class and then use <tr class="strikethrough">!
.strikethrough {
text-decoration: line-through;
}
table,
th,
td {
border: 1px solid black;
}
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr class="strikethrough">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
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; }