4

我需要在一个长的 13 列表中布局数据。但它需要看起来像两个表，在第 10 列和第 11 列之间有一些空间。在 HTML 中是如何完成的？我的第一个想法是一个 14 列的表，第 11 列占用空间但不可见。不过，我不知道该怎么做。

4

3 回答 3

3

如果您不希望有空的表格单元格，这对于视障人士来说可能很奇怪，试试这个。

<style type="text/css">
    td {display: inline-block;}    
    td.spaced {margin-left: 20px;}
</style>
<table>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td class="spaced">Three</td>
    </tr>
</table>

http://jsfiddle.net/eS3QE/

于 2013-02-05T03:14:36.140 回答
1

我认为这更像是一个 CSS 问题，但可以使用:nth-child. 创建空表格单元格作为第 11 列并使用：

td:nth-child(11) {
    border: 0;
}

http://jsfiddle.net/ExplosionPIlls/rZYRd/

于 2013-02-05T03:11:55.220 回答
-2

试试这个例子，看看它是否符合您的喜好...... 5 列，第 2 列和第 4 列之间有一个垫片。它可以改进，但我认为它具有您所追求的外观。

<html>
<table cols=5 style='border:thin solid blue'>
<tr>
<th style='border:thin solid blue'>Col 1</th>
<th style='border:thin solid blue'>Col 2</th>
<th>&nbsp</th>
<th style='border:thin solid blue'>Col 3</th>
<th style='border:thin solid blue'>Col 4</th>
</tr>
<tr>
<td style='border:thin solid blue'>Col 1A</th>
<td style='border:thin solid blue'>Col 1B</th>
<td>&nbsp</th>
<td style='border:thin solid blue'>Col 1D</th>
<td style='border:thin solid blue'>Cell 1E</th>
</tr>
</table>
</html>
于 2013-02-05T03:20:24.840 回答