ansaurus

Question

Answer 1

+2 A:

Did you try using col grouping?

<table>
    <colgroup>
        <col class="right-padding" />
        <col class="right-padding" />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </tbody>
</table>

Joel Potter 2009-03-17 22:06:51

Doesn't work. See above.

Jordie 2009-03-18 11:10:35

Answer 2

+7 A:

try using cols

example

<table>
    <col style="padding-right:20px;" />
    <col style="padding-right:30px;" />
    <col />
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

cols also support classes :)

hope this helps

Darko

EDIT: To clarify a col is an element declared at the top of the table to influence entire columns. The first col element will influence the first column, the second col = second column and so on. They can be grouped in colgroups if you wish to assign the same style to more than one column.

EDIT2: After some more research it turns out that the only reliable styles you can set on a col element are:

border
background
width
visibility

No margin or padding. Bugger! Would setting the width of the columns explicitly solve your problem?

Darko Z 2009-03-17 22:07:16

Doesn't work. See above.

Jordie 2009-03-18 11:10:00

Adding markup for styling purposes is a semantic no-no.

Josh Stodola 2009-03-18 21:10:47

Answer 3

A:

You could also consider using a series of fixed width divs floated left with margins. This might give you a bit more control over the element styling.

.row div {
     margin-right: 10px;
     float: left;
     width: 50px;
}

    <div class="row">
        <div>Cell One</div>
        <div>Cell Two</div>
        <div>Cell Three</div>
    </div>

Bayard Randel 2009-03-17 22:10:43

Errr.. we're advocating using divs even for tabular data now?

cletus 2009-03-17 23:07:09

No, but the OP seems to be having difficulty achieving the styling they want with the table element. Tables are certainly best for tabular data.

Bayard Randel 2009-03-18 21:15:50

Answer 4

A:

What about just adding an empty cell that works as a spacer? You could use the col-tag as stated above to give the empty cells a certain width

<col/>
<col style="width:20px"/>
<col/>
<col style="width:20px"/>
<col/>
<tr>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
  <td>& nbsp;</td>
  <td>Data</td>
</tr>

Or if you want to do more with them, just add classes to them instead of usin inline styling...

peirix 2009-03-18 07:01:58

Use more markup for styling purposes? Wow. This is a horrible idea.

Josh Stodola 2009-03-18 21:03:19

Answer 5

+4 A:

How about giving each table cell a transparent border? I am pretty sure this will do it for you...

table td {
  border:solid 5x transparent;
}

And you can only apply it horizontally like so...

table td {
  border-left:solid 10px transparent;
}
table td:first-child {
  border-left:0;
}

Here's a complete working demo of what I believe you are trying to accomplish...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      table {
        border: 1px solid black;
      }

      table td {
        background: yellow;
        border-left:solid 10px transparent;
      }

     table td:first-child {
       border-left:0;
     }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>
  </body>
</html>

I do not believe IE6 supports the CSS :first-child, so here is a workaround for that...

<!–-[if IE 6]>
<style type="text/css">
  table td {
    border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
  }
</style>
<![endif]-->

Josh Stodola 2009-03-18 20:58:15

:first-child isn't exactly widely supported CSS

Jordie 2009-03-19 13:49:55

I realize that. It's all about picking the best solution for the requirements.

Josh Stodola 2009-03-19 14:31:40

I've added an IE6 workaround for you, Jordie.

Josh Stodola 2009-03-19 14:34:47

ansaurus

tags:

views:

answers:

CSS horizontal table cell spacing: how?

related questions