gpt4 book ai didi

html - 表格中特定行的边框?

转载 作者:技术小花猫 更新时间:2023-10-29 11:26:59 25 4
gpt4 key购买 nike

我正在尝试设计一些可以在表格中的特定行周围放置边框的 HTML/CSS。是的,我知道我真的不应该使用表格进行布局,但我对 CSS 的了解还不足以完全取代它。

无论如何,我有一个包含多行和多列的表格,其中一些与 rowspan 和 colspan 合并,我想在表格的某些部分周围放置一个简单的边框。目前,我正在使用附加到 <td> 的 4 个独立的 CSS 类(顶部、底部、左侧、右侧)。分别位于表格顶部、底部、左侧和右侧的单元格。

.top {
border-top: thin solid;
border-color: black;
}

.bottom {
border-bottom: thin solid;
border-color: black;
}

.left {
border-left: thin solid;
border-color: black;
}

.right {
border-right: thin solid;
border-color: black;
}
<html>

<body>

<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td class="top left">one</td>
<td class="top right">two</td>
</tr>
<tr>
<td class="bottom left">three</td>
<td class="bottom right">four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr>
<td class="top bottom left right" colspan="2">hello</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>

</html>

有没有更简单的方法来做我想做的事?我尝试将顶部和底部应用于 <tr>但它没有用。 (附:我是 CSS 的新手,所以我可能错过了一个非常基本的解决方案。)

注意:我确实需要有多个带边框的部分。基本思想是有多个带边界的簇,每个簇包含多行。

最佳答案

tr {outline: thin solid black;}怎么样?适用于 tr 或 tbody 元素,以及 appears与大多数浏览器兼容,包括 IE 8+,但不兼容之前的版本。

关于html - 表格中特定行的边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/670424/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com