Question

在我的表格中，我想在单元格之间设置空格，这样表格单元格和表格本身之间只有两个单元格之间没有间距。我的表格HTML是2列和2行，如下所示：

<table class="president-table" border="0">
    <tbody>
        <tr>
            <td>
                some text
            </td>
            <td>
                <img class="alignnone" src="images/lili-239x300.jpg" width="239" height="300"></img>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <img src="images/kate-240x300.jpg" width="240" height="300" />
            </td>
        </tr>
    </tbody>
</table>

我使用了以下CSS：

.president-table{
    border-collapse: separate;
    border-spacing: 15px 0px;
}

表格应如下所示：

表格顶部

| TD TD |

| TD TD |

表结束

TD和TR之间仅在每两个TD之间没有空间。建议？

Answer 1

使用border-spacing无法达到预期效果，因为这会在每个单元格周围增加空间，而不仅仅是在“内部”单元格之间。

细胞填充不起作用，因为它也会在四个边上生长细胞。

如果您可以使用CSS3，那么您可以尝试

table.test td:not(:last-child) { padding: 0 10px 0 0; }

如果你没有CSS3，那么除了每一行中的最后一个TD之外，你必须添加一个样式，它给单元格一个正确的填充（或者除了第一个左边填充之外的所有TD）。

注意：无法在单元格之外获取空间，因为表格会吞下边距（Cannot put margin on <td> tag with neither CSS nor cellspacing attribute）

Demo.

Answer 2

我相信你需要一些额外的HTML，但也不会太糟糕。正如AaronDigulla所指出的，基本问题是你无法为单个表格中的单元格设置单独的cell-padding。然后，围绕这个问题的方法是使用额外的元素并替代它们。

<tr>
    <td>Cell</td>
    <td>
        <div class="mid_col">Cell</div>
    </td>
    <td>Cell</td>
</tr>

现在你根本不需要任何单元格填充/间距 - 你可以设置.mid_col div的样式，然后你就可以参加比赛了。

/* No spacing on the cells */
table{
    border-collapse: collapse;
    border-spacing: 0px;
}

/* General cell styling - also styling the new divs to match */
.mid_col,
td {
    padding: 12px;
}

/* This takes the vertical spacing off of the tds holding the new divs
       It also sets the space between each column (here 25px) */
td:nth-of-type(2){
    padding:0px 25px;
}

http://jsfiddle.net/daCrosby/7JufT/77/

Answer 3

<强> Live Demo

你应该试试这个，希望你的问题解决。

<强> HTML：

<table class="test">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>

<强> CSS：

table.test td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
    padding: 12px 12px 12px 12px;
}
table.test {
  border-collapse: separate;
  border-spacing: 10px;
  *border-collapse: expression('separate', cellSpacing = '10px');
}

Answer 4

这样做：

.president-table{
    border-collapse: separate;
    border-spacing: 15px 15px; /* notice the second 15px '/
}

同样在你的第一个标签中，你错误地在src和class属性上设置引号“”。

它的外观应该是

<img class="alignnone" src="images/lili-239x300.jpg" width="239" height="300"></img>

仅在表格单元格之间设置空间

4 个答案: