如何使表格中的 <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 旁边。

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

Answer 1

好的，我认为这是可能的，但不能用于表格。你需要使用弹性盒子。 这是我的例子。

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

Answer 2

有几个问题：

1. 缺少<tr> 标签，这是无效的HTML。

2. 删除td上的display: inline-block;，它会破坏默认的表格布局，并阻止单元格匹配高度。

3. border-collapse: collapse; 必须设置为 table，而不是 td。

4. 由于您在单元格上设置了不同的height，它会找到最高的单元格并将其应用于其余单元格。如果您没有定义任何height，将由内容决定。同样，它总是匹配最高的。

5. 如果您需要固定单元格宽度，并且单元格数量已知，假设每个单元格为 11，75px 宽度。在75x11=825px 的table 上设置宽度。

更新代码如下：

table {
  border-collapse: collapse; /*added*/
  width: 825px; /*added*/
}
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;
}

<table>
  <tbody>
    <tr>
      <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>
    </tr>
  </tbody>
</table>

Answer 3

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

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

给 tr 一个高度（自动使用最高的 td 高度作为行高），然后将 td 高度设为其父级的 100% (tr)

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

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

编辑

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

如果您需要动态更改 css 值，您没有其他选择，只有 javascript。