В CSS display: table, как мне поддерживать постоянную ширину ячейки?

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' и установите его в качестве класса для тегов.Удалите div с помощью класса livesearchrow.Теперь 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>