Changing Cellspacing in a single column only

Question

Is there a way to change the cell spacing in a single column only? Possibly in html or css?

Solution 1

I've found that using the following:

CSS:

.flag {padding-left:8px;}

HTML within table:

<td class="flag">

Helped me solve the problem with spacing in between just one column.

Solution 2

No, both the HTML attribute cellspacing and its CSS counterpart border-spacing apply to an entire table only. When borders are not used and backgrounds are not an issue, you can use padding to achieve the same effect using padding. But regarding spacing between borders of cells of a table, it’s unavoidably uniform within a table.

Using fake cells might be a workaround. Instead of setting borders on cells, set them on containers that you have inside cells. Then any padding on the cells will look like spacing between borders of cells.

Solution 3

Good convention for this is:

HTML:

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="large-padding">Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
    <td>Row 1, Col 3</td>
  </tr>
  <tr>
    <td class="large-padding">Row 2, Col 1</td>
    <td>Row 2, Col 2</td>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td class="large-padding">Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

CSS:

/* Used for all table cells */
td {
  padding: 10px;
}

/* Used for all table cells with the class large-padding, used on the first cell of every row (the first column */
.large-padding {
  padding: 10px 20px; /* 10px for top and bottom to keep inline with the other cells, 20px for left and right */
}

I hope that illustrates it well. This will give you better control over the padding in the cells. Use margin to do spacing between cells. If you apply the css class to the first td in every row, that will be the first column of the table.