border-collapse: collapse 在tbody中横向无效果请教!

Question

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>

Answer 1

该回答引用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>