3

Maybe I am being too picky. I want to put cell padding in some tables but not others, without editing every single td element. I would like to make it html5 compliant, which means not using the cellpadding property of the table. But I would like something equivalent to cellpadding - ie something I can apply to the properties of a whole table, on a table by table basis.

To make it even more complicated, I want collapsed borders, which I think rules out using the cell spacing property. Is there something tricky I can do there?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
freediver
  • 33
  • 2

2 Answers2

0
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
.cell-pad th,.cell-pad td{padding:10px}
</style>
</head>

<body>
<p>Table without cellpadding:</p>
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with cellpadding:</p>
<table cellpadding="10">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with css:</p>
<table class="cell-pad">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>
</html>
Nikunj
  • 26
  • 5
0

You can solve these problems using CSS.

table.table-big td {
  padding: 10px;
}

table.table-collapse {
border-collapse: collapse;  
}

table td {
  border: 1px solid #333;
}
<table class="table-big table-collapse">
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

padding on the cell level can be used to create spacing between data and border.
border-collapse on the table can be used to collapse or separate borders.

You can create classes with these styles so you keep direct control on which table gets which styling. In my example the second table did not get any styling.

Maarten Bicknese
  • 1,498
  • 1
  • 14
  • 27