Разрешить переполнение элемента в таблице с разметкой таблицы: исправлено

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, таким образом это рубится.Это почти работает с дисплеем: встроенный;на этом 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>

В приведенном выше столбце правильной ширины, но мы должны были удалить первые заголовки, чтобы добиться этого.

И, наконец, янадеюсь, вот скрипка с первой строкой подзаголовка, имитирующей строки данных - если мы сможем получить текст в «Это длинный заголовок разрезан», чтобы вытечь из его 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>

В приведенном выше столбце правильной ширины, и заголовки отображаются, но верхний заголовок рубится, потому что он может быть только ширинойпервый ТД.

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>