HTML colspan无法处理带有分离标头的样式表

Question

我有一个样式表，我正在构建列调整大小和其他功能。这是我的代码（可在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中删除句柄）。同样，列上有排序图标，可以接受点击表格排序。

标题已分离，因此在滚动条中，标题shold保留在div的顶部。

当表上有数据时，该表工作正常。

现在我想在表中没有数据时显示一条消息，例如“找不到数据”。我需要在8列中传播该消息。

我使用了colspan功能，但我的问题是colspan没有显示在表的完整8列中，而只显示在前2列。

我需要一种方法来使所有8列显示“找不到数据”行。我无法更改原始CSS，因为整个表正在工作（调整列，样式，分离标题等）。列上的宽度也不固定（它们在此代码中是固定的，但它们是动态构建的，因此将宽度相加并不能解决问题。）

类“ux-data-table-nodata”无效，因为宽度仅限于第二列。

帮助appreacited使No Data Found列水平扩展到8列。

Answer 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/