如何使用HTML跳过表格中的单元格？
如何使用HTML跳过表格中的单元格？
提问于 2021-04-24 21:00:46
如何使用HTML跳过第一行的第一个单元格，同时在表格的其余部分保持表格边框(如图片中的示例)？我知道如何对单个单元格边框执行此操作，但我希望保留表的外部边框，而不是单元格边框。例如，有没有办法从第二列开始第一行？
回答 3
Stack Overflow用户
发布于 2021-04-24 21:31:57
创建一个空单元格来表示裁剪(此is valid and recommended by the spec)，删除该空单元格的背景，并为其提供与表格相同的边框属性，但在与表格边框(在本例中为上边框和左边框)重叠的位置将其边框样式设置为隐藏。任何样式为隐藏的表格单元格的边框都会导致在折叠边框模式下与其重叠的任何边框消失(CSS2.1、css-tables-3)：
table {
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
border-spacing: 0;
}
th {
background-color: #56a9ce;
}
th, td {
font-family: sans-serif;
text-align: center;
}
tr:first-child > th:first-child {
background-color: transparent;
border: 1px #000;
border-style: hidden solid solid hidden;
}<table>
<thead>
<tr>
<th></th><th colspan="3">Content</th>
<tr>
<th>Content</th><th>Content</th><th>Content</th><th>Content</th>
</thead>
<tbody>
<tr>
<td>X</td><td>X</td><td>X</td><td>X</td>
<tr>
<td>X</td><td>X</td><td>X</td><td>X</td>
<tr>
<td>X</td><td>X</td><td>X</td><td>X</td>
</tbody>
</table>
Stack Overflow用户
发布于 2021-04-24 21:12:50
可以使用CSS伪类是一个关键字。例如，要从第二列开始第一行：
.table tr:first-child > td:ntn-child(2) {
// Something
}您也可以使用:not()。
Stack Overflow用户
发布于 2021-04-24 21:30:35
您需要为每个单元格设置边框，而不是在表格上全局设置边框。
代码可能如下所示
table {
border: none;
}
table tr:first-child td {
border-top: 1px solid black;
}
table tr:last-child td {
border-bottom: 1px solid black;
}
/* ... same for columns with pseudo classes on td */
/* first cell in first row */
table tr:first-child td:first-child {
border: 1px solid black;
border-left-color: transparent;
border-top-color: transparent;
}我让你自己弄清楚细节
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67243066
复制相关文章
相似问题
腾讯云开发者
