Question

背景

我想在表格的列中添加小标签。我在我的项目中使用了HTML5 / CSS3的一些实现部分，本节专门针对移动设备。虽然这两个事实并不一定相关，但最重要的是我不必支持Internet Explorer甚至Firefox（仅限WebKit）。

问题

使用我当前的CSS方法，单元格的垂直填充来自＆lt; span＆gt; element（设置为display: block顶部/底部边距），其中包含列的“值”。因此，当<span>为空或缺失（没有值）且标签不到位时，没有填充。

“完整”的coulmns应该让你知道我想要标签的位置，即使没有价值，<span>也不存在。

我意识到我可以使用“非破坏空间”，但我真的想避免它。

我想知道你们中是否有人有修复/更好的方法来做到这一点？目前的代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
<title>ah</title>
<style>

body {
 width: 320px;
}

/* TABLE */

table { width: 100%; border-collapse: collapse; font-family: arial; }
th, td { border: 1px solid #ccc; border-width: 0px 0px 1px 1px; }
th:last-child, td:last-child { border-right-width: 1px; }
tr:first-child th { border-top-width: 1px; background: #efefef; }

/* RELEVANT STUFF */

td {
 padding: 3px;
}

td sup {
 display: block;
}

td span {
 display: block;
 margin: 3px 0px;
 text-align: center;
}

</style>
</head>
<body>

<table>
    <tr>
        <th colspan="3">something</th>
    </tr>
    <tr>
        <td><sup>some label</sup><span>any content</span></td>
        <td><sup>some label</sup><span>any content</span></td>
        <td><sup>some label</sup><span></span></td><!-- No content, just a label -->
    </tr>
</table>

</body>
</html>

Answer 1

如上所述，您可以使用：

td {
 padding: 3px;
 vertical-align:top;
}

如果您想要精确地保留填充，即使在不可见元素上，也可以使用以下方法强制空填充上的hasLayout属性：

td {
 padding: 3px;
  vertical-align:top;
}

td sup {
 display: block;
}

td span {
 display: inline-block;
 margin: 3px 0px;
 text-align: center;
 width:100%;
}

在Drawing empty inline boxes in CSS?

中广泛讨论了内联块技术

CSS：表格列中的标签

1 个答案: