CSS horizontal table cell spacing: how?

2019-03-11 15:13发布

站内问答 / JavaScript
1441 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条回答
Summer. ? 凉城
2楼-- · 2019-03-11 15:39

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>
查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
3楼-- · 2019-03-11 15:39

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) 举报
成全新的幸福
4楼-- · 2019-03-11 15:41

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) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)