使用 div 创建的分组 table header

Question

我使用 div 创建了一个 table 现在我希望多个列共享一个 header，它应该位于列的中心。

通常如下所示：

---Header--- a | b | C | d 1 | 2 | 3 | 4 p | q | R | S HTML:

.div-table {
  display: table;
  width: auto;
  background-color: #eee;
  border: 1px solid #666666;
  border-spacing: 5px;
  /* cellspacing:poor IE support for  this */
}

.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}

.div-table-col {
  float: left;
  /* fix for  buggy browsers */
  display: table-column;
  width: 200px;
  background-color: #ccc;
}

<body>
  <form id="form1">
    <div class="div-table">
      <div class="div-table-row">
        <div class="div-table-col" align="center">Header</div>
        <div class="div-table-col">Header</div>
        <div class="div-table-col">Header</div>
        <div class="div-table-col">Header</div>
      </div>
      <div class="div-table-row">
        <div class="div-table-col">001</div>
        <div class="div-table-col">002</div>
        <div class="div-table-col">003</div>
        <div class="div-table-col">004</div>
      </div>
      <div class="div-table-row">
        <div class="div-table-col">xxx</div>
        <div class="div-table-col">yyy</div>
        <div class="div-table-col">www</div>
        <div class="div-table-col">www1</div>

      </div>
      <div class="div-table-row">
        <div class="div-table-col">ttt</div>
        <div class="div-table-col">uuu</div>
        <div class="div-table-col">Mkkk</div>
        <div class="div-table-col">Mkkkww</div>
      </div>

    </div>
  </form>
</body>

CSS:
.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

这是一个 jsfiddle link： https://jsfiddle.net/st8qyat9/6/ 使用 div 实现了 table。在这个例子中，我需要将 header 分组，而不是在每一行的顶部都有 header，这看起来像上面的描述。

Answer 1

<div class="div-table">
            <div>
                <div align="center">Header</div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col">001</div>
                <div class="div-table-col">002</div>
                <div class="div-table-col">003</div>
                <div class="div-table-col">004</div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col">xxx</div>
                <div class="div-table-col">yyy</div>
                <div class="div-table-col">www</div>
                <div class="div-table-col">www1</div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col">ttt</div>
                <div class="div-table-col">uuu</div>
                <div class="div-table-col">Mkkk</div>
                <div class="div-table-col">Mkkkww</div>
            </div>
        </div>

Answer 2

为此，我能想到的最佳方法是为您的 header 创建一个新的 class（在本例中，我将其列为 colspan，因为这是您通常使用的使用实际的 table 个单元格来创建您要查找的内容）。

实际上，您想要的跨度是 .div-table-col class 大小的四倍（或您需要的任意倍数）- 因此您可以将宽度列为 100% 以确保您可以根据需要在任何 table 上使用 header class！

此外，您可以包括 text-align:center;为此，您不必将其包含在 html 本身中。

希望对您有所帮助！

.div-table {
  display: table;
  width: auto;
  background-color: #eee;
  border: 1px solid #666666;
  border-spacing: 5px;
  /* cellspacing:poor IE support for  this */
}

.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}

.div-table-col {
  float: left;
  /* fix for  buggy browsers */
  display: table-column;
  width: 200px;
  background-color: #ccc;
}

.div-table-colspan {
  float: left;
  /* fix for  buggy browsers */
  display: table-column;
  width: 100%;
  background-color: #ccc;
  text-align:center;
}

<body>
  <form id="form1">
    <div class="div-table">
      <div class="div-table-row">
        <div class="div-table-colspan">Header</div>
      </div>
      <div class="div-table-row">
        <div class="div-table-col">001</div>
        <div class="div-table-col">002</div>
        <div class="div-table-col">003</div>
        <div class="div-table-col">004</div>
      </div>
      <div class="div-table-row">
        <div class="div-table-col">xxx</div>
        <div class="div-table-col">yyy</div>
        <div class="div-table-col">www</div>
        <div class="div-table-col">www1</div>

      </div>
      <div class="div-table-row">
        <div class="div-table-col">ttt</div>
        <div class="div-table-col">uuu</div>
        <div class="div-table-col">Mkkk</div>
        <div class="div-table-col">Mkkkww</div>
      </div>

    </div>
  </form>
</body>

使用 div 创建的分组 table header

Grouping table header created using divs

html

css

css-tables