css - 如何使表格中的 <td> 元素具有相同的高度？

Question

我知道对此有很多疑问，但我的设置与大多数人不同。我有一个随页面移动的单行表。请参阅 JSFiddle:https://jsfiddle.net/evk49ey1/1/

html:

<table>
<tbody>
    <td>a</td>
    <td id="b">b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
    <td>f</td>
    <td>g</td>
    <td>h</td>
    <td>i</td>
    <td id="j">j</td>
    <td>k</td>
</tbody>
</table>

CSS:

td{
overflow: hidden;
display: inline-block;
white-space: nowrap;
  vertical-align: top;
background-color: #3399ff;
height: 50px;
width: 75px;
border: 1px solid black;
border-collapse: collapse;
}
td:nth-child(odd){
  background-color: #1177dd;
}

#b{
  height: 80px;
}

#j{
  height:90px;
}

我想要一个只有 css 和 html 的解决方案。提前致谢!

编辑:这是我现在所拥有的:https://jsfiddle.net/evk49ey1/3/

所有单元格的高度都相同，而且当您更改一个单元格的内容时，其他单元格的内容也会随之更改。

截图:

现在我希望单元格 g、h、i、j 和 k 的高度仅为 50 像素，因为它们不在需要更高高度的单元格 a 旁边。

这是我想要实现的:

Answer 1

好吧，我认为这是可能的，但不适用于表格。你需要使用 flexbox。 这是我的例子。

.container {
  display: flex;
  flex-wrap: wrap;
}
.inner {
  overflow: auto;
  display: flex;
  word-wrap: break-word;
  background-color: #3399ff;
  width: 75px;
  min-height: 50px;
  border: 1px solid black;
}
.inner:nth-child(odd) {
  background-color: #1177dd;
}

<div class="container">
  <div class="inner">
    <p>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</p>
  </div>
  <div class="inner">b</div>
  <div class="inner">c</div>
  <div class="inner">d</div>
  <div class="inner">e</div>
  <div class="inner">f</div>
  <div class="inner">g</div>
  <div class="inner">h</div>
  <div class="inner">i</div>
  <div class="inner">j</div>

和JSFiddle link .当您调整窗口大小时，您可以看到它。