0

背景：

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

问题

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

“完整”库应该让您知道我希望标签在哪里，即使没有价值，<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>
4

1 回答 1

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%;
}

内联块技术在用 CSS 绘制空内联框？

于 2010-05-24T18:07:52.157 回答