Menu
Hopefully this is an easy one but I have not found a solution. I want to put space between columns on a table.
Example
| Cell |<- space ->| Cell |<- space ->| Cell | An important point is that I do not want space on the edges. There is a border-spacing property but it is not supported in IE (6 or 7) so that is no good. It also puts space at the edges.
The best I have come up with is to put padded-right: 10px on my table cells and add a class to the last one to remove the padding. This is less than ideal because the extra space is part of the cell not outside it. I guess you could do the same thing with a transparent border?
I also tried using jQuery:
$(function() { $("table > tbody > tr:not(:last-child").addClass("right-padding"); }); but even on tables that are only ~100 rows in size this was taking 200-400ms in some cases, which is too slow.
Any help appreciated.
Thanks
To those suggesting columns they do not work. Try this:
<html> <head> <title>Layout</title> <style type="text/css"> table { border: 1px solid black; } td { background: yellow; } </style> </head> <body> <table> <col style="padding-right: 30px;"> <col style="padding-right: 30px;"> <col> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html> 
847
The HTML <table> cellspacing Attribute is used to specify the space between the cells. The cellspacing attribute is set in terms of pixels. Attribute Values: pixels: It sets the space between the cells in terms of pixels.
The space between the table cells is controlled by the CELLSPACING attribute in the TABLE tag. By setting CELLSPACING to zero, you can remove all the space between the cells of your table. This removes all the space between the cells of our table (see Figure 9).
Use the border-spacing property on the table element to set the spacing between cells. Make sure border-collapse is set to separate (or there will be a single border between each cell instead of a separate border around each one that can have spacing between them).
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. Similarly, you can use the CSS border-spacing property to apply the spacing between adjacent table cell borders like the cellspacing attribute.
How about giving each table cell a transparent border? I am pretty sure this will do it for you...
table td { border:solid 5x transparent; } And you can only apply it horizontally like so...
table td { border-left:solid 10px transparent; } table td:first-child { border-left:0; } Here's a complete working demo of what I believe you are trying to accomplish...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Layout</title> <style type="text/css"> table { border: 1px solid black; } table td { background: yellow; border-left:solid 10px transparent; } table td:first-child { border-left:0; } </style> </head> <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html> I do not believe IE6 supports the CSS :first-child, so here is a workaround for that...
<!–-[if IE 6]> <style type="text/css"> table td { border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent'); } </style> <![endif]--> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
