如何在粘性表头中不重叠地中断长内容-解网

问：

我正在尝试在滚动时冻结表标题（左列）。

我遵循了这个解决方案，但是我发现当表头内容大于单元格时，内容会中断，但它在下一行重叠。或者行未显示对齐。

body {
  font: 16px Calibri;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

td,
th {
  margin: 0;
  padding: 8px;
}

div {
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding-bottom: 1px;
}

.headcol {
  position: absolute;
  width: 5rem;
  left: 0;
  top: auto;
  display: block;
  word-break: break-all;
  border: 1px solid grey;
}

 td {
      border: 1px solid grey;
    }

.long {
  letter-spacing: 1em;
}

<div>
  <table>
    <tr>
      <th class="headcol">row row row 1</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">row row 2</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">row row row row 3</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">4</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">5</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">row row row6</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">7</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">8</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">9</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
  </table>
</div>

我做了一个工作小提琴 https://jsfiddle.net/epkoayzx

似乎表格单元格 TD/TH 不会根据内容进行相应扩展。如何解决这个问题？

CSS HTML 表格

如何在粘性表头中不重叠地中断长内容

how to break long content without overlap in a sticky table header

评论