发表新帖
发表新帖

CSS horizontal table cell spacing: how?

后端 未结
关注
9 2072
悲哀的现实
悲哀的现实 2021-02-03 19:12

Hopefully this is an easy one but I have not found a solution. I want to put space between columns on a table.

Example

| Cell |<- space ->| Cell |
相关标签:
9条回答
  • 没有蜡笔的小新
    2021-02-03 19:40

    It is work for me

    border-collapse: separate; border-spacing: 0px 3px;

    0 讨论(0)
  • 长情又很酷
    2021-02-03 19:42

    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...

    0 讨论(0)
  • 一生所求
    2021-02-03 19:43

    Josh's answer doesn't work if you already have borders around your cells, like me.

    I solved the problem by shifting the whole table slightly to the left, using "position: relative; left: -10px". I combined this with cellspacing on the table.

    <div id='sandbox'>
    <table cellspacing='10'>
          <tr>
                <td class='smoothBox'>
                    ...
                </td>
                <td class='smoothBox'>
                    ...
                </td>
          </tr>
    </table>
</div>

    and the css:

    #sandbox {
    float: left;
    position: relative; /* move the whole sandbox */
    left: -11px;        /* slightly to the left */
    width: 950px;
    margin-top: 0px;
    padding: 1px;
    text-align: left;
}
#sandbox table {
    float: left;
    width: 100%;
}
#sandbox td {
    width: 300px;
    vertical-align: top;
}

    This is what works for me, I hope it may help you too.

    0 讨论(0)
  • 北荒
    2021-02-03 19:47

    It is may be what are you loking for:

    You can use two values: the first is the horizontal cellspacing, the second the vertical one.

    <table style="border-spacing: 40px 10px;">
    0 讨论(0)
  • 温柔的废话
    2021-02-03 19:48

    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>
    0 讨论(0)
  • 天命终不由人
    2021-02-03 19:52

    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">

<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]-->
    0 讨论(0)
 看不清?
提交回复
热议问题