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

Posted 2023-03-06

【中文标题】如何使表格中的 <td> 元素高度相同？

【英文标题】：How to make <td> elements in table same height?

【发布时间】：2016-04-30 00:04:43

【问题描述】：

我知道有很多关于此的问题，但与大多数人相比，我有不同的设置。我有一个与我的页面一起移动的单行表。见 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 旁边。

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

【问题讨论】：

您希望它们都具有相同的高度并且最大高度为 90px？

等高：使用 flexbox 简单易用：***.com/a/33815389/3597276

@Narek-T，不，这不是我想要的。请参阅我的问题中的编辑：部分，了解我想要实现的目标。

@Michael_B，我认为这不会解决我的问题。请参阅我的问题中的编辑：部分，了解我想要实现的目标。

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

【参考方案2】：

有几个问题：

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

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

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

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

如果您需要固定单元格宽度，并且单元格数量已知，假设每个单元格为 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>

【参考方案3】：

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

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

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

trheight:auto;
tdheight:100%

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

编辑

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

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

【讨论】：

我希望行中的所有 div 都与最高的 div 高度相同

所以我的小提琴有效，只需删除#b 样式，它们的高度都相同

如果你也改变#j样式，你可以看到所有的tds都和你放入#j的高度一样

但如果我将 td 高度设置为 100px 并将 #j 高度设置为 200px，则所有其他 div 都不是 200px。

如果你想拥有所有相同的高度，你为什么要设置一个高度的两倍？如果你想要动态改变，你不能只用 html/css 来做，但你必须使用 javascript