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.
Related
I'm writing a web page based on someone else's stylesheet. The stylesheet includes the following:
table {
border-collapse: collapse;
}
th, td {
padding: 0;
}
Now I want to create a table that has a non-zero cell padding. But I am having trouble overriding this stylesheet:
<table cellpadding="10">
<tr>
<td padding="10">
Foo
</td>
...
...
</tr>
</table>
and none of the above works; the cell padding stays a tight zero.
How do I override the stylesheet (short of using a different stylesheet)?
You can do in-line styling:
<td style="padding: 10px">
or assign a class to your table and create a rule for it:
<table class="table">
<tr>
<td>
Foo
</td>
</tr>
</table>
and the CSS for this:
table td {
padding: 10px;
}
try to be more specific in your selector, for example
table td {
padding:10px;
}
The above will override
th, td {
padding: 0;
}
Learn more for CSS Specificity here.
Just inline the necessary styles:
<table style="border-collapse: separate; border-spacing: 10px;">
...
</table>
If you do this, you don't need the padding="10" on the td either. See http://jsbin.com/exovat/edit#html for a working example.
An alternative to inlining the styles is if you have access to your own custom stylesheet that loads after their stylesheet. Then you can set an id on the table like <table id="foo"> and then just override their styles in your custom stylesheet like this:
table#foo {
border-collapse: separate;
border-spacing: 10px;
}
[Note: The border-spacing css property does not work with IE7 or below; if you need those browsers to be supported, you are better off using some hackier method]
You could use inline styles (ie styles declared on the element), inline stylesheets (ie styles declared in the same page but not directly on elements) or external stylesheets. Unfortunately CSS styles override attributes in most cases (I believe attributes such as you are using here are deprecated, meaning in essence use stylesheets instead).
Create a new class for the table and apply it only to the tables you want to have this style.
table {
border-collapse: collapse;
}
th, td {
padding: 0;
}
table.newStyle { padding:10px; }
<table class="newStyle">
<tr>
<td padding="10">
Foo
</td>
...
...
</tr>
</table>
I want to have a table with padding between each of the cells, but not around the outer edge cells, that is, not around the table itself.
Using:
border-collapse : separate;
border-spacing : 0.5em;
gives me padding everywhere, while using:
border-collapse : collapse;
gives no padding anywhere.
Attempting an alternate approach, I can get padding solely between the cells horizontally using a td + td selector. However I can't use a tr + tr selector because it seems tr ignores margin, padding and border rules.
And, of course, padding on a plain td selector applies to all cells, even the outer-edges of the outer cells.
This only has to work for current-generation browser - no IE 6 or 7 for me thank you very much. And I am not going to loose any sleep over IE 8, though it would be nice if that worked.
This isn't a perfect solution, as it uses padding instead of border spacing. Possibly it will work for your problem though.
HTML:
<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
And the CSS:
table {
border: 1px red solid;
border-collapse: separate;
}
td {
background-color: green;
border: 1px black solid;
padding: 10px;
}
td:first-child {
padding-left: 0px;
}
td:last-child {
padding-right: 0px;
}
tr:first-child td {
padding-top: 0px;
}
tr:last-child td {
padding-bottom: 0px;
}
Produces:
Also on jsFiddle.
Can you fiddle with the markup to add .first to the first cell in a row and .last to the last, and I guess also to the first and last rows, and then pad appropriately?
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.
Given the following HTML page a horizontal line appears at the top of the table where the 1st row would have a 2nd and 3rd cell (if they were defined).
<html>
<head>
<Title>Test Page</Title>
<style type="text/css">
table {
margin:10px 0 10px 0;
padding:0;
margin: 0 0 0 0;
border-collapse: collapse;
border: 0;
}
td {
border:1px solid #CCCCCC;
padding:5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Test Title</td>
</tr>
<tr>
<td>Sub Title</td>
<td>Sub Title</td>
<td>Sub Title</td>
</tr>
<table>
</body>
</html>
I would like the line (highlighted below) removed by modifying CSS only. This line appears in Firefox but not IE6.
Note that I cannot modify the HTML in any way as this is generated by a third party system (the example above is simply to highlight the issue). This third-party system only allows me to modify the CSS.
This will get it to render without the top border in Firefox:
table, td {
border: 1px #CCC;
}
table {
margin: 0;
border-spacing: 0;
border-style: none none solid solid;
}
* html table {
border-collapse: collapse;
}
td {
border-style: solid solid none none;
padding: 5px;
}
It also works fine in IE7 for me. If it breaks in IE6, use conditional comments or css hacks to revert it to the state it was in your own code for IE6 only.
EDIT: Your third party tool is generating bad/invalid markup which will give you a very large browser compatibility/css headache, if it is at all feasible, replace it or generate the html yourself
Technically speaking the first row should be marked up as
<tr>
<td colspan="3">Test Title</td>
</tr>
So I don't think you can acheive that using tables.
A css tip
margin: 10px 0;
Puts 10px at the top and bottom and 0 on the left and right
The empty-cells property may help you in this case.
table {
empty-cells:hide;
}
Then again, maybe not. Can you also explicitly turn off the border of the table rows?
Is using javascript an option? You could inject a non breaking space into the cell, that should draw the border.
Here is the solution for this problem that really works. I found this out after sooo long
The problem is with tbody tag.
Check the solution here:
http://www.dashplanet.com/firefox-displaying-border-top-of-table-how-to-hide-that-1px-top-border-table
From Firefox Colspan Border-COllapse Bug:
The obvious workaround is to just set
the colspan before the DOM has
finished loading, or at minimum,
before the table has finished
rendering. However, this requires that
we clutter our otherwise clean HTML
with inline tags, or have
prior knowledge of the number of
columns at the HTML generation stage.
I hope to find a more elegant
"non-invasive JavaScript" solution in
the future, but at the current time I
don't know of one. Simply setting the
table's "display" style to "none" and
then re-setting it back to "block" did
not do the trick.