Question

我使用纯CSS创建表布局，我的行和单元格都不像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

尝试一下。选择类“ livesearchrow”并将其设置为标签的类。使用“ livesearchrow”类删除div。现在，a.livesearchrow是表行，其中的div是表单元格。

<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中，如何保持一致的单元格宽度？

1 个答案: