I'm trying to create a "wall" as in linkedin and I'm doing that by creating a long table. I've changed background color and table color to give contrast. My issue is that I can't separate my table rows so that the background color shows between them.
All of the examples I find use
<table style="border-collapse: separate;border-spacing:0 1rem;">
How do I color in the spacing to match the background?
Or are there better ways of solving this?
You can't do it exactly the way you want. Your options are:
add padding to every cell in the desired row: tr.this-one td { padding-bottom: 1em;}. This will use cells' background color.
add thick border to every cell in the desired row: tr.this-one td { border-bottom: 1em solid red;}. This will use border color you set, which you can make to match the background color you have.
add a row in the markup: <tr><td colspan="10"></td></tr> and style it the way you'd like. You can also have <thead>/<tfoot>/multiple <tbody> elements inside a table as a way to semantically group rows (but they're not styleable by themselves).
Hi
Maybe this will help. I put table into a div container and set it background. Then if you need to have another color between rows just change background-color property of table, because now is transparent should be same as container background.
table {
border-collapse: separate;
border-spacing: 0rem 1rem;
background-color: transparent;
border: 1px solid yellow;
}
tr {
background-color: tomato;
}
td {
padding: 5px;
}
.container {
display: flex;
justify-content: center;
background-color: royalblue;
}
<div class="container">
<table>
<tr>
<td>mallard</td>
<td>colorful</td>
</tr>
<tr>
<td>dog</td>
<td>piebald</td>
</tr>
<tr>
<td>fox</td>
<td>foxy</td>
</tr>
</table>
</div>
Cheers
In an HTML table, the cellpadding and cellspacing can be set like this:
<table cellspacing="1" cellpadding="1">
How can the same be accomplished using CSS?
Basics
For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":
td {
padding: 10px;
}
For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".
Issues in IE ≤ 7
This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.
In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.
table {
border-spacing: 0;
border-collapse: collapse;
}
Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.
Default
The default behavior of the browser is equivalent to:
table {border-collapse: collapse;}
td {padding: 0px;}
Cellpadding
Sets the amount of space between the contents of the cell and the cell wall
table {border-collapse: collapse;}
td {padding: 6px;}
Cellspacing
Controls the space between table cells
table {border-spacing: 2px;}
td {padding: 0px;}
Both
table {border-spacing: 2px;}
td {padding: 6px;}
Both (special)
table {border-spacing: 8px 2px;}
td {padding: 6px;}
Note: If there is border-spacing set, it indicates border-collapse property of the table is separate.
Try it yourself!
Here you can find the old HTML way of achieving this.
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
Setting margins on table cells doesn't really have any effect as far as I know. The true CSS equivalent for cellspacing is border-spacing - but it doesn't work in Internet Explorer.
You can use border-collapse: collapse to reliably set cell spacing to 0 as mentioned, but for any other value I think the only cross-browser way is to keep using the cellspacing attribute.
This hack works for Internet Explorer 6 and later, Google Chrome, Firefox, and Opera:
table {
border-collapse: separate;
border-spacing: 10px; /* cellspacing */
*border-collapse: expression('separate', cellSpacing = '10px');
}
table td, table th {
padding: 10px; /* cellpadding */
}
The * declaration is for Internet Explorer 6 and 7, and other browsers will properly ignore it.
expression('separate', cellSpacing = '10px') returns 'separate', but both statements are run, as in JavaScript you can pass more arguments than expected and all of them will be evaluated.
For those who want a non-zero cellspacing value, the following CSS worked for me, but I'm only able to test it in Firefox.
See the Quirksmode link posted elsewhere for compatibility details. It seems it may not work with older Internet Explorer versions.
table {
border-collapse: separate;
border-spacing: 2px;
}
The simple solution to this problem is:
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
Also, if you want cellspacing="0", don't forget to add border-collapse: collapse in your table's stylesheet.
Wrap the contents of the cell with a div and you can do anything you want, but you have to wrap every cell in a column to get a uniform effect. For example, to just get wider left & right margins:
So the CSS will be,
div.cellwidener {
margin: 0px 15px 0px 15px;
}
td.tight {
padding: 0px;
}
<table border="0">
<tr>
<td class="tight">
<div class="cellwidener">My content</div>
</td>
</tr>
</table>
Yes, it's a hassle. Yes, it works with Internet Explorer. In fact, I've only tested this with Internet Explorer, because that's all we're allowed to use at work.
This style is for full reset for tables - cellpadding, cellspacing and borders.
I had this style in my reset.css file:
table{
border:0; /* Replace border */
border-spacing: 0px; /* Replace cellspacing */
border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
padding: 0px; /* Replace cellpadding */
}
TBH. For all the fannying around with CSS you might as well just use cellpadding="0" cellspacing="0" since they are not deprecated...
Anyone else suggesting margins on <td>'s obviously has not tried this.
Simply use CSS padding rules with table data:
td {
padding: 20px;
}
And for border spacing:
table {
border-spacing: 1px;
border-collapse: collapse;
}
However, it can create problems in older version of browsers like Internet Explorer because of the diff implementation of the box model.
From what I understand from the W3C classifications is that <table>s are meant for displaying data 'only'.
Based on that I found it a lot easier to create a <div> with the backgrounds and all that and have a table with data floating over it using position: absolute; and background: transparent;...
It works on Chrome, Internet Explorer (6 and later) and Mozilla Firefox (2 and later).
Margins are used (or meant anyways) to create a spacer between container elements, like <table>, <div> and <form>, not <tr>, <td>, <span> or <input>. Using it for anything other than container elements will keep you busy adjusting your website for future browser updates.
CSS:
selector{
padding:0 0 10px 0; // Top left bottom right
}
You can easily set padding inside the table cells using the CSS padding property. It is a valid way to produce the same effect as the table's cellpadding attribute.
table,
th,
td {
border: 1px solid #666;
}
table th,
table td {
padding: 10px;
/* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellpadding in CSS</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent#mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker#mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo#mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Similarly, you can use the CSS border-spacing property to apply the spacing between adjacent table cell borders like the cellspacing attribute. However, in order to work border-spacing the value of border-collapse property muse be separate, which is default.
table {
border-collapse: separate;
border-spacing: 10px;
/* Apply cell spacing */
}
table,
th,
td {
border: 1px solid #666;
}
table th,
table td {
padding: 5px;
/* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellspacing in CSS</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent#mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker#mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo#mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Try this:
table {
border-collapse: separate;
border-spacing: 10px;
}
table td, table th {
padding: 10px;
}
Or try this:
table {
border-collapse: collapse;
}
table td, table th {
padding: 10px;
}
I used !important after the border-collapse like
border-collapse: collapse !important;
and it works for me in IE7. It seems to override the cellspacing attribute.
Say that we want to assign a 10px "cellpadding" and a 15px "cellspacing" to our table, in a HTML5-compliant way. I will show here two methods giving really similar outputs.
Two different sets of CSS properties apply to the same HTML markup for the table, but with opposite concepts:
the first one uses the default value for border-collapse (separate) and uses border-spacing to provide the cellspacing,
the second one switches border-collapse to collapse and uses the border property as the cellspacing.
In both cases, the cellpadding is achieved by assigning padding:10px to the tds and, in both cases, the background-color assigned to them is only for the sake of a clearer demo.
First method:
table{border-spacing:15px}
td{background-color:#00eb55;padding:10px;border:0}
<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
Second method:
table{border-collapse:collapse}
td{background-color:#00eb55;padding:10px;border:15px solid #fff}
<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
td {
padding: npx; /* For cellpadding */
margin: npx; /* For cellspacing */
border-collapse: collapse; /* For showing borders in a better shape. */
}
If margin didn't work, try to set display of tr to block and then margin will work.
I have a table in my HTML yet I only want vertical spacing as it doesn't look right with the 25px horizontally. I can see no attribute in HTML to do this so is it possible?
Thanks in Advance,
Dean
EDIT:
I have a table with cellspacing all the way around of 25px. I would only like vertical cellspacing of 25px.
the cellpadding attribute, which I assume you're talking about, will only take a number and use it as pixels between the cell wall and content. You'll have to come up with a workaround, depending on your layout you may want to use a <div> instead, or if there aren't any borders around the cells you can add style='padding-bottom:25px' to it to create the same effect.
Just add this in the < head > section, just after the head tag opening of your page:
This should do the work:
<style type="text/css">
td { margin: 25px 0px; } /* tells the table to have 25
px on top and bottom, zero px on left and right */
</style>
Cleaner <table> element solution (useful for in-lining styles).
table {
border-collapse: separate;
border-spacing: 0 20px;
}
th {
background-color: blue;
color: white;
}
th, td {
width: 150px;
border: 1px solid black;
padding: 5px;
}
<table>
<tbody>
<tr>
<th>Vehicle <th>No. of Wheels <th>Rep (0-10)
<tr>
<td>Skateboard <td>4 <td>7
<tr>
<td>BMX <td>2 <td>6
<tr>
<td>Unicycle <td>1 <td>-1
I discovered this:
border-bottom: 25px solid transparent;
Be aware that IE6 has a problem with transparency.
I have a peculiar and frustrating problem. For the simple markup:
<table>
<thead>
<tr><th>1</th><th>2</th><th>3</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
I apply different background-color values to the thead, tr, and tr odd elements. The problem is that in most browsers, every cell has an unwanted border which is not the color of any of the table rows. Only in Firefox 3.5 does the table have no borders in any cell.
I'd just like to know how to remove these borders in the other major browsers so that the only thing you see in the table are the alternating row colors.
You need to add this to your CSS:
table { border-collapse:collapse }
to remove the border , juste using css like this :
td {
border-style : hidden!important;
}
Modify your HTML like this:
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr><td>1</td><td>2</td><td>3</td></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
(I added border="0" cellpadding="0" cellspacing="0")
In CSS, you could do the following:
table {
border-collapse: collapse;
}
Set the cellspacing attribute of the table to 0.
You can also use the CSS style, border-spacing: 0, but only if you don't need to support older versions of IE.
You may also want to add
table td { border:0; }
the above is equivalent to setting cellpadding="0"
it gets rid of the padding automatically added to cells by browsers which may depend on doctype and/or any CSS used to reset default browser styles
After trying the above suggestions, the only thing that worked for me was changing the border attribute to "0" in the following sections of a child theme's style.css (do a "Find" operation to locate each one -- the following are just snippets):
.comment-content table {
border-bottom: 1px solid #ddd;
.comment-content td {
border-top: 1px solid #ddd;
padding: 6px 10px 6px 0;
}
Thus looking like this afterwards:
.comment-content table {
border-bottom: 0;
.comment-content td {
border-top: 0;
padding: 6px 10px 6px 0;
}
Try assigning the style of border: 0px; border-collapse: collapse; to the table element.
sometimes even after clearing borders.
the reason is that you have images inside the td, giving the images display:block solves it.
In the page Toggle Squares , I have a table made out of an <img /> in every cell generated by JavaScript. I applied the following CSS:
.game, .game td, .game tr, .game img
{
border: none;
border-spacing: 0;
padding: 0;
margin: 0;
}
In order to remove all spacing. However, now I'm getting a thin background line of spacing between two adjacent rows. How can I eliminate it?
The page is valid XHTML + CSS.
Thanks for any help.
Regards,
Shlomi Fish.
add cellpadding="0" and cellspacing="0" attributes to table, or try to use
border-collapse: collapse;
border-width: 0;
in css..
.game td img {
display: block;
}
Images come with their own white space
Fixed:
.game, .game td, .game tr, .game img
{
border: none;
border-spacing: 0;
padding: 0;
margin: 0;
vertical-align: middle;
}
The problem is: inline image is treated as a letter with ascent = height of the image and descent = descent of the font. That means that a table cell that contains only an image has the height that is bigger than the image height.
The simplest way to fix that is to set line-height to zero for the whole table thus suppressing the descent in the text lines or set display: block for all images thus moving them out of inline formatting context into block formatting context.
I was able to get the effect you are looking for with the following code:
The code depicts four solid colored jpegs right next to each other forming a square with no space inbetween:
<html>
<head>
<style>
td { margin 0px; padding: 0px;}
table { border-collapse:collapse;}
</style>
</head>
<body>
<table>
<thead />
<tbody>
<tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
<tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
</tbody>
</table>
</body>