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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

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

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

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

的100％

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

＆＃34; b＆＃34;和＆＃34; J＆＃34;你正在设置一个不同的高度，我不知道它是否需要。这就是他们有不同身高的原因

修改

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

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

Answer 3

有几个问题：

它缺少<tr>标记，这是无效的HTML。
删除display: inline-block;上的td，它会破坏默认的表格布局，并阻止单元格与高度匹配。

border-collapse: collapse;

table，而不是td。
由于您在单元格上设置了不同的height，因此它会找到最高的一个并将其应用于其余单元格。如果您没有定义任何height，则由内容决定。同样，它总是与最高的匹配。
如果您需要固定的单元格宽度，并且使用已知数量的单元格，请使用11，75px宽度。在table的{{1}}上设置宽度。

以下更新的代码：

＆＃13;

75x11=825px

＆＃13;

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;
}

＆＃13;

如何使表中的元素具有相同的高度？

3 个答案: