HTML colspan 不适用于带有分离标题的样式表答案

【问题标题】：HTML colspan not working on styled table with detached headerHTML colspan 不适用于带有分离标题的样式表
【发布时间】：2019-10-16 05:30:47
【问题描述】：

我有一个样式表，我正在构建列大小调整和其他功能。这是我的代码（可在that Fiddle 获得）：

<div class="ux-data-table">
  <div class="ux-data-table-inner">
    <table>
      <thead>
        <tr>
          <th class="ux-data-table-th" style="width: 20px; min-width: 20px; max-width: 20px;">
            <span class="ux-data-table-th-title">
            <input type="checkbox" value="on">
          </span>
            <div class="ux-data-table-th-grip">
            </div>
          </th>
          <th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
            <span class="ux-data-table-th-title">Name</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <span class="fa fa-long-arrow-up"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
          <th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
            <span class="ux-data-table-th-title">Description</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
          <th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
            <span class="ux-data-table-th-title">Property 1</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
          <th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
            <span class="ux-data-table-th-title">Property 2</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
          <th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
            <span class="ux-data-table-th-title">Property 3</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
          <th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
            <span class="ux-data-table-th-title">Property 4</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
          <th class="ux-data-table-th" style="width: 300px; min-width: 300px; max-width: 300px;">
            <span class="ux-data-table-th-title">Property 5</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
        </tr>
      </thead>
      <tbody class="ux-data-table-nodata">
        <tr>
          <td colspan="8">No data found.</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

.ux-data-table {
  width: auto;
  max-width: 100%;
  height: calc(100vh - 300px);
  overflow: auto;
  float: left;
}

.ux-data-table-inner {
  position: relative;
}

.ux-data-table table {
  width: 100%;
}

.ux-data-table table,
.ux-data-table th,
.ux-data-table td {
  border-style: solid;
  border-width: 1px;
  border-color: blue;
  border-collapse: collapse;
  color: black;
  background-color: white;
  text-align: left;
  font-weight: normal;
  font-size: 12px;
  padding: 5px;
}

.ux-data-table thead {
  position: absolute;
}

.ux-data-table tbody {
  margin-top: 20px;
  display: block;
}

.ux-data-table table thead tr th {
  letter-spacing: 1px;
}

.ux-data-table table tr:hover td {
  background-color: #f0f0ff;
}

.ux-data-table-th-icon-spacer {
  padding-left: 5px;
}

.ux-data-table-th-title {
  cursor: n-resize;
  vertical-align: middle;
}

.ux-data-table-th {
  position: relative;
}

.ux-data-table-th-grip {
  width: 5px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: col-resize;
}

.ux-data-table-clear {
  clear: both;
}

.ux-data-table-checkbox-grayed {
  filter: invert(25%);
}

.ux-data-table-selected-cell td {
  background-color: #f0ffff;
}

.ux-data-table-nodata {
  position: initial;
  display: table-row-group;
  width: 100%;
}

“grips”将与 javascript 代码一起用于列大小调整，并且工作正常（只是告诉无法从 HTML 中删除夹点）。同样的，在接受点击表格排序的列上也有排序图标。

标题是分离的，因此在滚动运动中标题保持在 div 的顶部。

当表格上有数据时，表格可以正常工作。

现在我想在表格没有数据时显示一条消息，例如“未找到数据”。我需要在我的 8 个专栏中传播该信息。

我使用了 colspan 功能，但我的问题是 colspan 没有显示在表格的全部 8 列中，而仅显示在前 2 列中。

我需要一种方法使“未找到数据”行显示在所有 8 列中。我无法更改原始 CSS，因为整个表格都在工作（调整列大小、样式、分离标题等）。列的宽度也不是固定的（在这段代码中它们是固定的，但是它们是动态构建的，所以对宽度求和并不能解决问题）。

类 'ux-data-table-nodata' 不起作用，因为不知何故宽度被限制在第二列。

如何使“未找到数据”列水平扩展到 8 列？

【问题讨论】：

您确定要 7 列吗？ <thead> 中有 8 列，因此您应该在 <tbody> 中将 <td> 添加到 <tr>，将 colspan 更改为 8，在 < thead> 中删除 <th> 或应用 @987654332 @ 到第一个或最后一个 th
@zer00me：当然，是 8 列！！我忘记了选择列……已编辑并更正……
你正在使用 SASS？请以编译后的形式发布 CSS。
是的，我正在使用 SASS，但帖子包含生成的 CSS（我刚刚更正了一项引用 SASS 颜色的项目）。
什么是position:init？

标签： html css html-table

【解决方案1】：

问题似乎是您通过将其位置设置为绝对来将表头从 html 流中分离出来。

一旦您删除它并从 tbody 中删除显示块，表格就会按预期运行。

这是一个例子：

HTML

<div class="ux-data-table">
  <div class="ux-data-table-inner">
    <table>
      <thead>
        <tr>
          <th class="ux-data-table-th" style="width: 20px;min-width: 20px;max-width: 20px;">
            <span class="ux-data-table-th-title">
            <input type="checkbox" value="on">
          </span>
            <div class="ux-data-table-th-grip">
            </div>
          </th>
          <th class="ux-data-table-th" style="/* width: 300px; *//* min-width: 300px; *//* max-width: 300px; */">
            <span class="ux-data-table-th-title">Name</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <span class="fa fa-long-arrow-up"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
          <th class="ux-data-table-th" style="/* width: 300px; *//* min-width: 300px; *//* max-width: 300px; */">
            <span class="ux-data-table-th-title">Description</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
          <th class="ux-data-table-th" style="/* width: 300px; *//* min-width: 300px; *//* max-width: 300px; */">
            <span class="ux-data-table-th-title">Property 1</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
          <th class="ux-data-table-th" style="/* width: 300px; *//* min-width: 300px; *//* max-width: 300px; */">
            <span class="ux-data-table-th-title">Property 2</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
          <th class="ux-data-table-th" style="/* width: 300px; *//* min-width: 300px; *//* max-width: 300px; */">
            <span class="ux-data-table-th-title">Property 3</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
          <th class="ux-data-table-th" style="/* width: 300px; *//* min-width: 300px; *//* max-width: 300px; */">
            <span class="ux-data-table-th-title">Property 4</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
          <th class="ux-data-table-th" style="/* width: 300px; *//* min-width: 300px; *//* max-width: 300px; */">
            <span class="ux-data-table-th-title">Property 5</span>
            <span class="ux-data-table-th-icon-spacer"></span>
            <div class="ux-data-table-th-grip"></div>
          </th>
        </tr>
      </thead>
      <tbody class="ux-data-table-nodata">
        <tr>
          <td colspan="8" style="
    width: 400px;
">No data found.</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

.ux-data-table {
  width: auto;
  max-width: 100%;
  height: calc(100vh - 300px);
  overflow: auto;
  /*float: left;*/
}


/* Prevents the header from overflowing the scrollbars */

.ux-data-table-inner {
  position: relative;
}

.ux-data-table table {
  width: 100%;
}

.ux-data-table table,
.ux-data-table th,
.ux-data-table td {
  border-style: solid;
  border-width: 1px;
  //    border-left: none;
  //    border-right: none;
  border-color: blue;
  border-collapse: collapse;
  color: black;
  background-color: white;
  text-align: left;
  font-weight: normal;
  font-size: 12px;
  padding: 5px;
}

.ux-data-table thead {
  /*position: absolute;*/
}

.ux-data-table tbody {
  /*margin-top: 20px;
  display: block;*/
}

.ux-data-table table thead tr th {
  letter-spacing: 1px;
}

.ux-data-table table tr:hover td {
  background-color: $ux-color-hover;
}

.ux-data-table-th-icon-spacer {
  padding-left: 5px;
}

.ux-data-table-th-title {
  cursor: n-resize;
  vertical-align: middle;
}

.ux-data-table-th {
  position: relative;
}

.ux-data-table-th-grip {
  width: 5px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: col-resize;
}

.ux-data-table-clear {
  clear: both;
}

.ux-data-table-checkbox-grayed {
  filter: invert(25%);
}

.ux-data-table-selected-cell td {
  background-color: $ux-color-selected;
}

.ux-data-table-nodata {
  position: init;
  display: table-row-group;
  width: 100%;
}

还有一个小提琴演示

https://jsfiddle.net/jfeferman/bjyomm2s/

假设您在 thead 上设置绝对位置以尝试实现固定标题，您将需要执行一些 css 技巧，如下例所示：

https://www.virendrachandak.com/techtalk/sticky-header-and-footer-using-css/

【讨论】：

如前所述，由于其他正在工作的表功能（排序、列调整大小、滚动上的固定标题等），我无法删除分离。我需要一个保留现有类的解决方案......你指出的技巧并没有解决问题。
我不相信 colspan 属性可以在具有分离标题的表中工作。鉴于您还需要 col resize 等功能，您需要对 tbody 单元格进行宽度计算。这可以通过在表格附加到 DOM 时计算列的宽度，然后调整所需行的大小来完成。在某些时候，您将需要重构 css 并实现 javascript 计算以达到所需的功能。