如何使表格中的 <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 的高度仅为 50px，因为它们不在需要更高高度的单元格 a 旁边。

这就是我想要实现的目标：

原文由 blobliebla 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 链接。当您调整窗口大小时，您可以看到它。

原文由 Narek-T 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我不知道我是否真的理解你的问题，但如果你需要所有的 tds 高度相同，我会将它们包装成 tr ，如下所示：

https://jsfiddle.net/evk49ey1/2/

给 tr 一个高度（自动使用最高的 td 高度作为行高），然后 td 高度是它父级的 100%（ tr ）

 tr{height:auto;}
td{height:100%}

对于“b”和“J”，你设置了不同的高度，我不知道它是否需要。这就是他们身高不同的原因

编辑

有点混乱.. css是一种不允许动态更改的语言，因为当您部署项目时，所有样式以及页面需要显示的方式都已经存在并可以使用。

如果您需要动态更改 css 值，除了 javascript，您别无选择。

原文由 Nick 发布，翻译遵循 CC BY-SA 3.0 许可协议