tags:

views:

190

answers:

2

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.

A: 

you could use <th> (table header) instead of the <td>s on the first table row and target that with css. besides that there is a css first-child selector (not compatible with all browsers)

table tr:first-child td{
   /* css code for no spacing here */
}
pferdefleisch
+3  A: 

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.

Ventus
Yes, that was just a quick example to be sure my meaning was clear. The fact remains the the border-spacing and border-collapse can ONLY target the table tag itself. Unless I find another set of css properties that can remove the spacing, <thead> will be no more useful than <td>.
Lytithwyn
I can see your point now. Only thing that comes to my mind now is to make 2 tables, one above an another with `margin-top` or `margin-bottom` property set to 0. It is impossible to set different `cellspacing` values to some rows as well as you can't set different `width` to cells in the same column. Other solution is to create tables from `<div>` elements and `display: table-cell` property of CSS. See http://jimbarraud.com/2008/06/04/the-magical-css-table-cell/ for more info. I can't really see other choices here.
Ventus
I was afraid of that. I thought I'd ask, though. ;)I'm using GWT, so the html is being generated for me. I guess what I'll do is make a custom widget that contains the elements I need, span the entire first row, and add my composited widget as that cell's widget. Thanks for the suggestions!
Lytithwyn
If you want, you could add the use-another-table suggestion as an answer, and I could mark it accepted. I guess that's what we should do in a situation like this?
Lytithwyn