CODEWITHSUNDEEP
htmlcsshtml-table
Slurms
Slurms

Reputation: 199

Changing Cellspacing in a single column only

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

Upvotes: 7

Views: 17636

Answers (5)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201598

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.

Upvotes: 4

Slurms
Slurms

Reputation: 199

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.

Upvotes: 1

FluffyJack
FluffyJack

Reputation: 1732

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.

Upvotes: 1

Daniel Figueroa
Daniel Figueroa

Reputation: 10666

If you apply some css to the collumn that you want to have wider it should solve itself quite easily.

<table>
    <tr>
        <td></td>
        <td id="extra_width"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

And in the css you just apply the styling that you want on that collumn:

#extra_width {padding-left: 10px; padding-right: 10px;}

When you apply the width to the table cell in the middle in the first row, actually i think it works in any row, the cells in the same column will probably inherit, or atleast get the same width as that cell.

You should ofcourse test your way through, if you want padding or margin i cant figure that one out from your question, and I'm a bit unsure about the results from the two in a table.

Upvotes: -1

John Moses
John Moses

Reputation: 1283

If you have a table with 2 columns and you want one of the columns to be 100% of the width instead of 50%, then use the colspan property on the td tag. (I copied a quick table from w3schools, don't be mad)

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$100</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>

Upvotes: 0

Related Questions