CSS horizontal table cell spacing: how?

2019-03-11 15:13发布

站内问答 / JavaScript
1440 9 4

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 |<- space ->| Cell |

An important point is that I do not want space on the edges. There is a border-spacing property but it is not supported in IE (6 or 7) so that is no good. It also puts space at the edges.

The best I have come up with is to put padded-right: 10px on my table cells and add a class to the last one to remove the padding. This is less than ideal because the extra space is part of the cell not outside it. I guess you could do the same thing with a transparent border?

I also tried using jQuery:

$(function() {
  $("table > tbody > tr:not(:last-child").addClass("right-padding");
});

but even on tables that are only ~100 rows in size this was taking 200-400ms in some cases, which is too slow.

Any help appreciated.

Thanks

To those suggesting columns they do not work. Try this:

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    table { border: 1px solid black; }
    td { background: yellow; }
  </style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<col>
<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>

9条回答
冷血范
2楼-- · 2019-03-11 15:15

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?

查看更多
0人赞 添加讨论(0) 举报
一夜七次
3楼-- · 2019-03-11 15:21

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) 举报
兄弟一词,经得起流年.
4楼-- · 2019-03-11 15:22

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) 举报
叼着烟拽天下
5楼-- · 2019-03-11 15:26

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) 举报
做个烂人
6楼-- · 2019-03-11 15:28

It is work for me

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

查看更多
0人赞 添加讨论(0) 举报
贼婆χ
7楼-- · 2019-03-11 15:30

The Josh's answer is quite good, but in my opinion needlessly complicated. When you set the table borders to "hidden" and collapse mode to "collapse", the borders on the outer edges of columns will be eliminated, just as required.

Working example:

Stylesheet:

table#my_table  {
    border-collapse: collapse;
    border-style: hidden;
}

table#my_table td {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

HTML:

<table id="my_table">
   <tr>
     <td>A1</td>
     <td>A2</td>
     <td>A3</td>
   </tr>
   <tr>
     <td>B1</td>
     <td>B2</td>
     <td>B3</td>
   </tr>         
</table>
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)