Question

我想在纯CSS中创建表设计。我为<span>标签提供了不同的课程。它们定义了单元格的宽度。现在我想插入一列有一列（宽度为100％）。但<span>代码不会变为100％。

请参阅示例：

<div class="table">
    <span class="row head">
        <span class="cell w40">
            Title
        </span>
        <span class="cell w20">
            Title
        </span>
        <span class="cell w20">
            Title
        </span>
        <span class="cell w20">
            Title
        </span>
    </span>
    <span class="row single"><span class="cell center">Full width?</span></span>
</div>

CSS：

.table {
  display: table;
  width: 100%;
  max-width: 800px;
}
.table .row {
  display: table-row;
  width: 100%;
}
.table .row.head {
  font-weight: 600;
  background: #d4291f;
  color: white;
}
.table .row.head:hover .cell {
  background: #d4291f;
}
.table .row:hover .cell {
  background: #eeeeee;
}
.table .row.single .cell {
  width: 100%;
  display: block;
}
.table .cell {
  padding: 8px 8px;
  vertical-align: top;
  display: table-cell;
}
.table .cell.w40 {
  width: 40%;
}
.table .cell.w20 {
  width: 20%;
}
.table .cell.center {
  text-align: center;
}

你有什么想法吗？

Answer 1

经过一番研究后，我相信这是让它发挥作用的方法。 Demo Link

<div class="table">
<span class="row head">
    <span class="cell w40">
        Title
    </span>
    <span class="cell w20">
        Title
    </span>
    <span class="cell w20">
        Title
    </span>
    <span class="cell w20">
        Title
    </span>
</span>
</div>
<div class="table">
  <span class="row single">
    <span class="cell center">
      Full width?
    </span>
  </span>
</div>

并且.css只有一点变化，我删除了'width：100％;'

.table .row.single .cell {
  display: block;
}

Answer 2

因为span默认显示为内联。尝试将您的span类更改为 display：inline-block

CSS表格单元格不会变为全宽

2 个答案: