使用div创建的表头分组

问题描述 投票：0回答：2

我使用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/，它使用divs进行表实现。在这个例子中，我不需要将标题放在每行的顶部，而是需要对标题进行分组，这看起来像上面的描述。

html css css-tables
2个回答
0
投票

我能想到的最佳方法是为您的标题创建一个新类（对于此示例，我将其列为colspan，因为这是您通常用于实际表格单元格以创建您正在寻找的内容） 。

实际上，您希望扩展为.div-table-col类的四倍（或根据需要的次数） - 因此您可以将宽度列为100％，以确保您可以在任何表上使用头类你希望！

此外，您还可以包含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>
0
投票
<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.