border-collapse: collapse 在tbody中无效果请教
<table class="fiex-head-table3">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</tbody>
</table>
<style lang="scss">
.fiex-head-table3 {
tr {
display: table; // 如果这行没有,border 可以合并,但是下面的 tbody中td的宽度又不是设定值了
width: 100%;
table-layout: fixed;
/*重要 表格固定算法*/
}
td {
border: 0.5px solid;
height: 26px;
box-sizing: border-box;
border-collapse: collapse; // 横向border 没有合并
text-overflow: ellipsis;
text-align: center;
}
thead>tr>td {
width:100px;
background-color: #ccc;
}
tbody {
display: block;
overflow-y: auto;
max-height: 520px;
td {
width:100px;
border-color: green;
}
}
}
</style>
该回答引用ChatGPT
根据你提供的代码和描述，border-collapse: collapse 在 tbody 中没有生效的原因是因为你的 tbody 具有 display: block 属性，而 border-collapse 属性只适用于表格边框的合并，而不适用于非表格元素。
当你将 tbody 设置为 display: block 时，它将变成块级元素，与其相邻的元素之间会有默认的垂直间距，从而使 border-collapse 失效。如果要使用 border-collapse 属性，建议将 tbody 的 display 属性设置为默认值 table-row-group，以便保留表格行的性质。
<table class="fixed-head-table3">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</tbody>
</table>
<style lang="scss">
.fixed-head-table3 {
tr {
display: table;
width: 100%;
table-layout: fixed;
/* 重要 表格固定算法 */
}
td {
border: 0.5px solid;
height: 26px;
box-sizing: border-box;
border-collapse: collapse;
text-overflow: ellipsis;
text-align: center;
}
thead > tr > td {
width: 100px;
background-color: #ccc;
}
tbody {
display: table-row-group; // 修正
overflow-y: auto;
max-height: 520px;
td {
width: 100px;
border-color: green;
}
}
}
</style>
border-collapse: collapse 是table元素的样式，设置到table上就行
参考GPT和自己的思路，可以将 border-collapse: collapse; 应用到整个表格，而不是只应用到 tbody，这样横向的边框也会合并。修改后的代码如下：
<style lang="scss">
.fiex-head-table3 {
border-collapse: collapse; /* 将 border-collapse 应用到整个表格 */
tr {
display: table;
width: 100%;
table-layout: fixed;
}
td {
border: 0.5px solid;
height: 26px;
box-sizing: border-box;
text-overflow: ellipsis;
text-align: center;
}
thead>tr>td {
width:100px;
background-color: #ccc;
}
tbody {
display: block;
overflow-y: auto;
max-height: 520px;
td {
width:100px;
border-color: green;
}
}
}
</style>
这样就可以实现纵向和横向的边框合并了。
参考GPT的内容和自己的思路，要想在tbody中使 border-collapse: collapse; 生效，可以将 tbody 设置为 display: table-row-group;，并将 td 设置为 display: table-cell;。
以下是修改后的代码：
<style lang="scss">
.fiex-head-table3 {
tr {
display: table;
width: 100%;
table-layout: fixed;
}
td {
border: 0.5px solid;
height: 26px;
box-sizing: border-box;
text-overflow: ellipsis;
text-align: center;
}
thead>tr>td {
width:100px;
background-color: #ccc;
}
tbody {
display: table-row-group;
td {
display: table-cell;
width:100px;
border-color: green;
border-collapse: collapse;
}
}
}
</style>
回答不易，还请采纳！！！
以下答案由GPT-3.5大模型与博主波罗歌共同编写：
在你的代码中，tbody 元素被设置为 display: block; 和 overflow-y: auto;，这会导致其根本不参与表格布局。
可以将 tbody 改为 display: table-row-group;，这样就能让其参与表格布局。同时，为了保证横向的 border 能够合并，td 元素的 box-sizing 属性应该设置为 border-box。
下面是修改后的代码：
.fiex-head-table3 {
tr {
display: table;
width: 100%;
table-layout: fixed;
}
td {
border: 0.5px solid;
height: 26px;
box-sizing: border-box; /* 修改这里 */
border-collapse: collapse;
text-overflow: ellipsis;
text-align: center;
}
thead>tr>td {
width:100px;
background-color: #ccc;
}
tbody {
display: table-row-group; /* 修改这里 */
max-height: 520px;
td {
width:100px;
border-color: green;
}
}
}
希望能帮到你。
如果我的回答解决了您的问题，请采纳！
在设置 border-collapse: collapse 之后，想要让 border 横向合并，需要保证以下几点：
在你的代码中，tbody 中的 td 宽度没有设置为 100px，只有 thead 中的 td 才被设置为 100px，所以它们的宽度不一致，因此 border 横向没有合并。
要解决这个问题，可以将 tbody 中的 td 宽度设置为 100px，就像这样：
tbody {
display: block;
overflow-y: auto;
max-height: 520px;
td {
width: 100px; // 设置 td 宽度
border-color: green;
}
}
这样就可以横向合并 border 了。