Question

我正在使用CSS创建一个div表格。由于某种原因，行不占用100％的宽度，因此标题最终不对齐。我想要的结果是让桌子占据100％的宽度。然后我希望标题/正文的第一列占据其中的4％，我希望标题/正文的第二列占据其中的20％，然后剩余的列应该都是相同的宽度和占用剩下的空间。

error: 'Param2' undefined near line x column y

.table {
  display:table;
  width:100%;
}
  .table-row {
    display:table-row;
    width:100%;
  }
    .table-row > div {
      display:table-cell;
    }
      .table-row > div:first-child {
        width:4%;
      }
      .table-row > div:nth-child(2) {
        width:20%;
      }

Answer 1

同意其他意见。使用table，简化和可访问性（Google和辅助技术将如何知道这是一张桌子？）

如果你开始使用div，下面是一个解决方案。您错过了display: table-header-group;和display: table-row-group元素的thead和tbody样式。享受！

＆＃13;

.table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
  width: 100%;
}

.table-header {
  display: table-header-group;
  }
.table-body {
  display: table-row-group;
  }

.table-row>div {
  display: table-cell;
  border: 1px solid #f2f2f2; /* Not necessary */
}

.table-row>div:first-child {
  width: 4%;
}

.table-row>div:nth-child(2) {
  width: 20%;
}

＆＃13;

<div class="table">
  <div class="table-header">
    <div class="table-row">
      <div></div>
      <div>Product Name</div>
      <div>Product Size</div>
      <div>Quantity</div>
      <div>Color</div>
      <div>Price</div>
      <div>Sub-Total</div>
      <div></div>
    </div>
  </div>
  <div class="table-body">
    <div class="table-row">
      <div>1.</div>
      <div>Shirt</div>
      <div>Small</div>
      <div>3</div>
      <div>Blue</div>
      <div>$10</div>
      <div>$30</div>
      <div></div>
    </div>
    <div class="table-row">
      <div>2.</div>
      <div>Pants</div>
      <div>Medium</div>
      <div>2</div>
      <div>Blue</div>
      <div>$40</div>
      <div>$80</div>
      <div></div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

在这个结构中，表头的角色扮演'.table-header'，所以用'display：table-header-group'为该类添加规则，为'.table-body'添加第二个用'display：table-行组'

为什么我的表行不占用表的100％宽度？

2 个答案: