Question

我使用div创建了一个表现在我想要多个列共享一个应该位于列中心的标题。

通常如下所示：

---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链接： https://jsfiddle.net/st8qyat9/6/具有使用div的表实现。在这个例子中，我不需要将标题放在每行的顶部，而是需要对标题进行分组，如上所述。

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>

使用div创建的表头分组

1 个答案: