在 CSS display:table 中，如何保持一致的单元格宽度？

Question

我正在使用纯 CSS 创建 table 布局，但我的行和单元格的行为都不像 tr 或 td 元素。

结果似乎是单元格没有保持一致的宽度，行似乎有 float: left 行为，而它们应该是 display: block

这似乎在没有锚标签的情况下工作正常...为什么？

.livesearchtable {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.livesearchrow {
  display: table-row;
  background: #f8f8f8;
  width: 100%;
}

.livesearchcell {
  display: table-cell;
  width: auto;
  padding: 5px 7px;
  border-bottom: 1px solid #ccc;
  white-space: nowrap;
}

<div class="livesearchtable">
  <a href="../something.php">
    <div class="livesearchrow">
      <div class="livesearchcell">1</div>
      <div class="livesearchcell">Some text thats long enough to make a difference</div>
      <div class="livesearchcell">Lorem Ipsum</div>
    </div>
  </a>
  <a href="../something.php">
    <div class="livesearchrow">
      <div class="livesearchcell">2</div>
      <div class="livesearchcell">short</div>
      <div class="livesearchcell"></div>
    </div>
  </a>
</div>

Answer 1

试试这个。取 class 'livesearchrow' 并将其设置为标签的 class 。使用 'livesearchrow' class 删除 div。现在 a.livesearchrow 是 table-row 里面的 div 是 table-cells.

<div class="livesearchtable">
  <a href="../something.php" class="livesearchrow">
    <div class="livesearchcell">1</div>
    <div class="livesearchcell">Some text thats long enough to make a difference</div>
    <div class="livesearchcell">Lorem Ipsum</div>
  </a>
  <a href="../something.php" class="livesearchrow">
    <div class="livesearchcell">2</div>
    <div class="livesearchcell">short</div>
    <div class="livesearchcell"></div>
  </a>
</div>

在 CSS display:table 中，如何保持一致的单元格宽度？

In CSS display:table, how do I maintain consistent cell widths?

css

width