6

在我的表格中，我只想设置单元格之间的空间，以便表格单元格和表格本身之间只有每两个单元格之间没有间距。我的表格 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 之间。建议？

4

4 回答 4

8

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

单元格填充不起作用，因为它还会在所有四个侧面上生长单元格。

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

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

如果您没有 CSS3，那么您必须为每一行中除了最后一个 TD 之外的所有 TD 添加一个样式，从而为单元格提供右填充（或除第一个之外的所有元素都具有左填充）。

注意：没有办法在单元格之外获得空间，因为表格会吞下边距（不能在 <td> 标签上放置边距，既没有 CSS 也没有 cellspacing 属性）

演示。

于 2013-10-02T08:10:48.430 回答
2

我相信您将需要一些额外的 HTML，但还不错。正如 AaronDigulla 所指出的，基本问题是您不能cell-padding为单个表格中的单元格设置单独的。因此，解决这个问题的方法是使用额外的元素并为它们设置样式。

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

现在您根本不需要任何单元格填充/间距 - 您只需设置.mid_coldiv 样式即可开始比赛。

/* 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/

于 2013-10-02T08:47:54.117 回答
0

现场演示

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

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');
}
于 2013-10-02T07:32:50.363 回答
-1

这将做到：

.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>
于 2013-10-02T07:41:14.157 回答