In my HTML document, I have a table with two columns and multiple rows. How can I increase the space in between the first and second column with css? I've tried applying "margin-right: 10px;" to each of the cells on the left hand side, but to no effect.
This question is related to
html
css
cell
margin
css-tables
You can't single out individual columns in a cell in that manner. In my opinion, your best option is to add a style='padding-left:10px' on the second column and apply the styles on an internal div or element. This way you can achieve the illusion of a greater space.
If padding isn't working for you, another work around is to add extra columns and set a margin via width using <colgroup>. None of the padding solutions above were working for me as I was trying to give the cell border itself a margin, and this is what solved the problem in the end:
<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>
Style the borders of the table cells using :nth-child so that the 2nd and third columns appear to be a single column.
table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }
If you can't use padding (for example you have borders in td) try this
table {
border-collapse: separate;
border-spacing: 2px;
}
Try padding-right. You're not allowed to put margin's between cells.
<table>
<tr>
<td style="padding-right: 10px;">one</td>
<td>two</td>
</tr>
</table>
I realize this is quite belated, but for the record, you can also use CSS selectors to do this (eliminating the need for inline styles.) This CSS applies padding to the first column of every row:
table > tr > td:first-child { padding-right:10px }
And this would be your HTML, sans CSS!:
<table><tr><td>data</td><td>more data</td></tr></table>
This allows for much more elegant markup, especially in cases where you need to do lots of specific formatting with CSS.
You can use both of them:
padding-right:10px;
padding-right:10%;
But it's better to use with %.
If you have control of the width of the table, insert a padding-left on all table cells and insert a negative margin-left on the whole table.
table {
margin-left: -20px;
width: 720px;
}
table td {
padding-left: 20px;
}
Note, the width of the table needs to include the padding/margin width. Using the above as an example, the visual width of the table will be 700px.
This is not the best solution if you're using borders on your table cells.
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<style>_x000D_
table{_x000D_
border-spacing: 16px 4px;_x000D_
}_x000D_
_x000D_
td {_x000D_
border: 1px solid black;_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<table style="width:100%">_x000D_
<tr>_x000D_
<td>Jill</td>_x000D_
<td>Smith</td> _x000D_
<td>50</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Eve</td>_x000D_
<td>Jackson</td> _x000D_
<td>94</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>John</td>_x000D_
<td>Doe</td> _x000D_
<td>80</td>_x000D_
</tr>_x000D_
</table>_x000D_
_x000D_
</body>_x000D_
</html>Using padding is not correct way of doing it, it may change the look but it is not what you wanted. This may solve your issue.
Using border-collapse: separate; didn't work for me, because I only need a margin in-between the table cells not on the sides of the table.
I came up with the next solution:
-CSS
.tableDiv{
display: table;
}
.cellSeperator {
display: table-cell;
width: 20px;
}
.cell1 {
display: table-cell;
width: 200px;
}
.cell2 {
display: table-cell;
width: 50px;
}
-HTML
<div class="tableDiv">
<div class="cell1"></div>
<div class="cellSeperator"></div>
<div class="cell2"></div>
</div>
You can simply do that:
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>
No CSS is required :) This 10px is your space.
margin does not work unfortunately on individual cells, however you could add extra columns between the two cells you want to put a space between... another option is to use a border with the same colour as the background...
I found the best way to solving this problem was a combination of trial and error and reading what was written before me:
As you can see I have some pretty tricky stuff going on... but the main kicker of getting this to looking good are:
PARENT ELEMENT (UL): border-collapse: separate; border-spacing: .25em; margin-left: -.25em;
CHILD ELEMENTS (LI): display: table-cell; vertical-align: middle;
HTML
<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>
CSS
ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }
This solution work for td's that need both border and padding for styling.
(Tested on Chrome 32, IE 11, Firefox 25)
CSS:
table {border-collapse: separate; border-spacing:0; } /* separate needed */
td { display: inline-block; width: 33% } /* Firefox need inline-block + width */
td { position: relative } /* needed to make td move */
td { left: 10px; } /* push all 10px */
td:first-child { left: 0px; } /* move back first 10px */
td:nth-child(3) { left: 20px; } /* push 3:rd another extra 10px */
/* to support older browsers we need a class on the td's we want to push
td.col1 { left: 0px; }
td.col2 { left: 10px; }
td.col3 { left: 20px; }
*/
HTML:
<table>
<tr>
<td class='col1'>Player</td>
<td class='col2'>Result</td>
<td class='col3'>Average</td>
</tr>
</table>
Updated 2016
Firefox now support it without inline-block and a set width
table {border-collapse: separate; border-spacing:0; }_x000D_
td { position: relative; padding: 5px; }_x000D_
td { left: 10px; }_x000D_
td:first-child { left: 0px; }_x000D_
td:nth-child(3) { left: 20px; }_x000D_
td { border: 1px solid gray; }_x000D_
_x000D_
_x000D_
/* CSS table */_x000D_
.table {display: table; }_x000D_
.tr { display: table-row; }_x000D_
.td { display: table-cell; }_x000D_
_x000D_
.table { border-collapse: separate; border-spacing:0; }_x000D_
.td { position: relative; padding: 5px; }_x000D_
.td { left: 10px; }_x000D_
.td:first-child { left: 0px; }_x000D_
.td:nth-child(3) { left: 20px; }_x000D_
.td { border: 1px solid gray; }<table>_x000D_
<tr>_x000D_
<td>Player</td>_x000D_
<td>Result</td>_x000D_
<td>Average</td>_x000D_
</tr>_x000D_
</table>_x000D_
_x000D_
<div class="table">_x000D_
<div class="tr">_x000D_
<div class="td">Player</div>_x000D_
<div class="td">Result</div>_x000D_
<div class="td">Average</div>_x000D_
</div>_x000D_
</div>A word of warning: though padding-right might solve your particular (visual) problem, it is not the right way to add spacing between table cells. What padding-right does for a cell is similar to what it does for most other elements: it adds space within the cell. If the cells do not have a border or background colour or something else that gives the game away, this can mimic the effect of setting the space between the cells, but not otherwise.
As someone noted, margin specifications are ignored for table cells:
CSS 2.1 Specification – Tables – Visual layout of table contents
Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins.
What's the "right" way then? If you are looking to replace the cellspacing attribute of the table, then border-spacing (with border-collapse disabled) is a replacement. However, if per-cell "margins" are required, I am not sure how that can be correctly achieved using CSS. The only hack I can think of is to use padding as above, avoid any styling of the cells (background colours, borders, etc.) and instead use container DIVs inside the cells to implement such styling.
I am not a CSS expert, so I could well be wrong in the above (which would be great to know! I too would like a table cell margin CSS solution).
Cheers!
Following Cian's solution of setting a border in place of a margin, I discovered you can set border color to transparent to avoid having to color match the background. Works in FF17, IE9, Chrome v23. Seems like a decent solution provided you don't also need an actual border.
Source: Stackoverflow.com