Стретч-стол для вертикальной посадки ТД

Question

Я размещаю table внутри td.Установив width:100%, я могу заставить таблицу растягиваться по горизонтали, но я не смог сделать то же самое по вертикали.Независимо от того, что я пробовал, таблица будет иметь минимальную высоту, необходимую для содержания.

Ниже приведена структура таблицы

table {
    border-collapse: collapse;
    border-spacing: 2px;
    border-color: black;
}
td {
    border: 1px solid #ddd;
    background: #f2f5f7;
}

<table >
  <tbody>
    <tr>
      <td rowspan="2" style="background-color:#ff0000"/>
  
        <table>
          <tr>
            <td>A</td>
            <td>B</td>
          </tr>
          <tr>
            <td>C</td>
            <td>D</td>
          </tr>
        </table>
        
      <td><br>Extra<br></td>
    </tr>
    <tr>
      <td>Space<br><br></td>
    </tr>
    </table>

Я пытаюсь избавиться от красных областей над и под таблицей ABCD.Я пробовал решения из десятков различных вопросов, и я думал, что это будет просто, но ничего не помогло.

Я пробовал (в различных перестановках):

• height:100% для всех без исключения компонентов
• display:flex или display:block для вложенной таблицы и / или родительского элемента td
• явная установка padding:0px !important для всех компонентов

Ничто из этого не повлияло на высоту таблицы.

Самый многообещающий результат на данный момент: установка высоты в пиксельное значение (как height:100px делает изменить высоту стола. К сожалению, необходимая высота стола будет меняться в зависимости от факторов, не зависящих от меня. Я ищу программное решение этой проблемы.

( ПРИМЕЧАНИЕ: Я знаю, как использовать JS, чтобы получить высоту соседних ячеек и установить высоту tr s во вложенной таблице после загрузки страницы. Однако я не могу гарантировать, что JSбудет исполняемым, так что это мой Ласт курорт.)

Answer 1

Вот решение, которое я создал с помощью CSS Grid.

.grid-table {
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  background-color: #fff;
  color: #444;
  max-width: 800px;
  background-color: #ccc;
}

.grid-table > .row:not(:last-of-type) {
  border-bottom: 1px solid #ddd
}

.row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  align-items: center;
}

.row > .box:not(:last-of-type) {
  border-right: 1px solid #ddd;
}

.box {
  height: 100%;
  display: flex;
  align-items: center;
}

.box-item {
  padding: 5px;
}

<div class="grid-table">
  <!-- Table Row -->
  <div class="row">
    <div class="box">
      <div class="box-item">Column 1</div>
    </div>
    <div class="box">
      <div class="box-item">Column 2</div>
    </div>
    <div class="box">
      <div class="box-item">Column 3</div>
    </div>
  </div>
  
  <!-- Table Row -->
  <div class="row">
    <div class="box">
      <div class="box-item">A</div>
    </div>
    <div class="box">
      <div class="box-item">B</div>
    </div>
    <div class="box">
      <div class="box-item">Extra<br>Space</div>
    </div>
  </div>
  
  <!-- Table Row -->
  <div class="row">
    <div class="box">
      <div class="box-item">C</div>
    </div>
    <div class="box">
      <div class="box-item">D</div>
    </div>
    <div class="box">
      <div class="box-item">Extra<br>Space</div>
    </div>
  </div>
</div>

При таком решении высота отдельных столбцов всегда будет высотой самого высокого столбца.Вы можете контролировать, хотите ли вы, чтобы строки центрировались или нет, изменив атрибут align-items в классе .box.

JSFiddle