允许元素在表格布局中在表格中溢出：已修复

Question

关于该主题的话题很少，但没有一个对我有用。

我有一个包含标准行和列的HTML表格元素，并且我试图引入子标题来分解数据。子标题需要重叠（溢出）到其右边的几列，因为它通常比第一数据列宽

这是桌子

.REMOVETHISANDITWILLWORK {
  /*display:none;*/
}


.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}


.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}

<div class="datatable" tabindex="0">
  <div class="scrollingdiv" style="height: 797px;">
    <table style="width: 1429px;">
      <tbody>
        <tr class="trh trh1 REMOVETHISANDITWILLWORK">
          <td></td>
          <td class="th th1" colspan="14">Contracts</td>
        </tr>
        <tr class="trh trh2 REMOVETHISANDITWILLWORK">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Hardware Maintenance Contract</td>
        </tr>
        <tr data-k0="1622" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1622</td>
          <td class="assetlink ba" style="width: 240px;">IBM Hardware Maintenance Contract 2018-2019</td>
          <td style="width: 60px;">00534211</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Hardware Maintenance Contract</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Lease</td>
        </tr>
        <tr data-k0="1621" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1621</td>
          <td class="assetlink ba" style="width: 240px;">Server Lease 2018-2019</td>
          <td style="width: 60px;">00534210</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Lease</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Software License Agreement</td>
        </tr>
        <tr data-k0="1307" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1307</td>
          <td class="assetlink ba" style="width: 240px;">Corporate SPLA Standard Enrollment 938746</td>
          <td style="width: 60px;">00533896</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">938746</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr data-k0="1308" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1308</td>
          <td class="assetlink ba" style="width: 240px;">Standard OPEN License Confirmation Number 127543</td>
          <td style="width: 60px;">00533897</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">127543</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

在上面的标题显示中，但忽略了列宽，并且每一列都具有相同的宽度。

当子标题td存在时，即使数据在各TD上用样式标记，数据中的列也会失去宽度。

当子标题td不存在或被display：none隐藏（取消注释该CSS部分尝试使用）时，表中的列现在的大小正确地遵循了样式中指定的宽度

这与第一行的格式有关-如果我们隐藏第一行，即使存在后续的子标题，也可以正常工作。但是，当然，标题的全部要点是您需要它们在顶部。

我曾尝试给子标题行提供与数据行相同的TD数量，以及相同的“宽度样式”，但随后我无法使文本从TD流出，因此被砍断了。它几乎可以与display：inline;在该TD上-但这会使数据行中的第一列消失。

以下是各列的摘要，但必须删除第一个子标题：

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}


.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}

<div class="datatable" tabindex="0">
  <div class="scrollingdiv" style="height: 797px;">
    <table style="width: 1429px;">
      <tbody>
        <tr data-k0="1622" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1622</td>
          <td class="assetlink ba" style="width: 240px;">IBM Hardware Maintenance Contract 2018-2019</td>
          <td style="width: 60px;">00534211</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Hardware Maintenance Contract</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Lease</td>
        </tr>
        <tr data-k0="1621" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1621</td>
          <td class="assetlink ba" style="width: 240px;">Server Lease 2018-2019</td>
          <td style="width: 60px;">00534210</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Lease</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Software License Agreement</td>
        </tr>
        <tr data-k0="1307" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1307</td>
          <td class="assetlink ba" style="width: 240px;">Corporate SPLA Standard Enrollment 938746</td>
          <td style="width: 60px;">00533896</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">938746</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr data-k0="1308" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1308</td>
          <td class="assetlink ba" style="width: 240px;">Standard OPEN License Confirmation Number 127543</td>
          <td style="width: 60px;">00533897</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">127543</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

在上面，列的宽度正确，但是我们必须删除第一个标头才能实现此目的。

最后，我希望这是第一个模拟数据行的副标题行的摆弄-如果我们可以使“ This is a long header choped”中的文本从TD流出而又不弄乱表的其余部分，就可以完成工作。

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}


.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}

<div class="datatable" tabindex="0">
  <div class="scrollingdiv" style="height: 797px;">
    <table style="width: 1429px;">
      <tbody>
        <tr class="trh trh1 REMOVETHISANDITWILLWORK">
          <td></td>
          <td class="th1" style="width: 30px;">This is a longer header chopped</td>
          <td style="width: 240px;"></td>
          <td style="width: 60px;"></td>
          <td style="width: 130px;"></td>
          <td style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;"></td>
          <td style="width: 100px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;"></td>
          <td style="display: none;"></td>
          <td style="display: none;"></td>
        </tr>
        <tr data-k0="1622" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1622</td>
          <td class="assetlink ba" style="width: 240px;">IBM Hardware Maintenance Contract 2018-2019</td>
          <td style="width: 60px;">00534211</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Hardware Maintenance Contract</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Lease</td>
        </tr>
        <tr data-k0="1621" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1621</td>
          <td class="assetlink ba" style="width: 240px;">Server Lease 2018-2019</td>
          <td style="width: 60px;">00534210</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Lease</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Software License Agreement</td>
        </tr>
        <tr data-k0="1307" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1307</td>
          <td class="assetlink ba" style="width: 240px;">Corporate SPLA Standard Enrollment 938746</td>
          <td style="width: 60px;">00533896</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">938746</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr data-k0="1308" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1308</td>
          <td class="assetlink ba" style="width: 240px;">Standard OPEN License Confirmation Number 127543</td>
          <td style="width: 60px;">00533897</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">127543</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

在上面，列的宽度正确，并且显示了标题，但是顶部的标题被砍掉了，因为它只能与第一个TD一样宽。

Answer 1

将td更改为th将解决此问题。

更改：

<td class="th1" style="width: 30px;">This is a longer header chopped</td>

收件人：

<th class="th1" style="width: 30px;">This is a longer header chopped</th>

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}


.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}

<div class="datatable" tabindex="0">
  <div class="scrollingdiv" style="height: 797px;">
    <table style="width: 1429px;">
      <tbody>
        <tr class="trh trh1 REMOVETHISANDITWILLWORK">
          <td></td>
          <th class="th1" style="width: 30px;">This is header is NO longer chopped</th>
          <td style="width: 240px;"></td>
          <td style="width: 60px;"></td>
          <td style="width: 130px;"></td>
          <td style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;"></td>
          <td style="width: 100px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;"></td>
          <td style="display: none;"></td>
          <td style="display: none;"></td>   
        </tr>
        <tr data-k0="1622" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1622</td>
          <td class="assetlink ba" style="width: 240px;">IBM Hardware Maintenance Contract 2018-2019</td>
          <td style="width: 60px;">00534211</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Hardware Maintenance Contract</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Lease</td>
        </tr>
        <tr data-k0="1621" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1621</td>
          <td class="assetlink ba" style="width: 240px;">Server Lease 2018-2019</td>
          <td style="width: 60px;">00534210</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Lease</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Software License Agreement</td>
        </tr>
        <tr data-k0="1307" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1307</td>
          <td class="assetlink ba" style="width: 240px;">Corporate SPLA Standard Enrollment 938746</td>
          <td style="width: 60px;">00533896</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">938746</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr data-k0="1308" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1308</td>
          <td class="assetlink ba" style="width: 240px;">Standard OPEN License Confirmation Number 127543</td>
          <td style="width: 60px;">00533897</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">127543</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>