Question

I’d like to know if it’s possible to remove the space between table cells on a web page for only one row. I’ve seen lots of examples showing how to do this for the entire table, but I have a table whose header would look much nicer with no spacing between its cells. Here’s an example of what I mean:

<table>
  <tr>
    <!-- I'd like these cells to NOT have any space between them -->
    <td>ColHeader1</td>
    <td>ColHeader2</td>
    <td>ColHeader3</td>
  </tr>
  <tr>
    <!-- I'd like these cells to have normal spacing -->
    <td>NormalCol1</td>
    <td>NormalCol2</td>
    <td>NormalCol3</td>
  </tr>
</table>

I’ve tried setting padding to 0 in the row and in the cells, but that doesn’t do anything for me. The border-collapse property can only be applied to the table element, and the same goes for border-spacing.

Answer 1

Please try to use tables in better way. So if you have header in your table make it like this:

<table>
  <thead>
    <tr>
      <th>header 1</th>
      <th>header 2</th>
       ...
    </tr>
  </thead>
  <tbody>
    (table content goes here>
  </tbody>
</table>

Now you can easily separate styles for header and table body.

<thead> was made specifically for table header sections, because they are widely used. If you have a footer in your table, you can also use the <tfoot> tag (but keep in mind that is has to appear before the <tbody> tag).

Hope this is what you’re looking for.

Edit:
Another possibility is to create two tables, one for headers and one for content. You could also make headers out of div elements and style them in table fashion. As pointed out in the comments, it is impossible to apply different values of cellspacing or cellpadding.

<table cellspacing="0">
  (headers)
</table>
<br />
<table cellspacing="2">
  (content)
</table>

Yet another option is to create the entire table from div elements, but for tabular content it is better to use table.