如何使表中的元素具有相同的高度？[英]How to make elements in table same height? 本文翻译自  blobliebla  查看原文  2016-01-23  7273    css/

I know there are many questions about this, but I have an other set-up than most people. I have a one-row table that moves with my page. See JSFiddle: https://jsfiddle.net/evk49ey1/1/

我知道有很多这方面的问题,但我还有其他设置,而不是大多数人。我有一个与我的页面一起移动的单行表。见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;
}

I want a css and html only solution. Thanks in advance!

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

EDIT: This is what I have till now:https://jsfiddle.net/evk49ey1/3/

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

The cells have all the same height, also when you change the content of one cell the others will follow along.

当您更改其他单元格的内容时,单元格的高度也相同。

Screenshot:

And now I want that the cells g, h, i, j and k just get an height of 50px, because they are not next to cell a which needs more height.

而现在我希望细胞g,h,i,j和k得到50px的高度,因为它们不在需要更多高度的细胞a旁边。

This is what I want to achieve:

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

3 个解决方案

#1

Ok, I think this is possible, but not with tables. You need to use flexbox. Here is my example.

好吧,我认为这是可能的,但不是表格。您需要使用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>

And JSFiddle link. When you resize window you can see it.

和JSFiddle链接。调整窗口大小时,您可以看到它。

#2

I don't know if i really understand your question, but if you need all the tds to be the same height, i would wrap them into a tr, like this:

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

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

give the tr a height (auto uses the tallest td height as row height) , and then td height to be 100% of it's parent (tr)

给tr一个高度(auto使用最高的td高度作为行高),然后td height为它的父级的100%(tr)

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

For "b" and "J" you are setting a different height, i don't know if it's wanted or not. That's the reason why they have a different height

对于“b”和“J”,你设置了不同的高度,我不知道它是否需要。这就是为什么他们有不同的高度

EDIT

There is a bit of confusion.. css is a language that doesn't allow dynamic changes, as when you deploy a project, all the style and how the page needs to be displayed is already there and ready to be used.

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

If you need to dynamically change a css value, you have no other option that javascript.

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

#3

There are a couple of problems:

有几个问题:

1. It's missing <tr> tag, which is invalid HTML.

   它缺少标签,这是无效的HTML。

2. Remove display: inline-block; on the td, it breaks the default table layout, and prevents the cells from matching height.

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

3. border-collapse: collapse; must be set on table, not td.

   边界崩溃:崩溃;必须在桌子上设置,而不是td。

4. Since you have different height set on the cell, it will find the tallest one and applies it to rest of cells. If you don't have any height defined, it will be decided by the content. Again, it always matches the tallest one.

   由于您在单元格上设置了不同的高度,因此它将找到最高的单元并将其应用于其余单元格。如果您没有定义任何高度,则将由内容决定。同样,它总是与最高的一个匹配。

5. If you need fixed cell width, and with known number of cells, let's say 11, 75px width for each. Set a width on the table of 75x11=825px.

   如果你需要固定的单元格宽度,并且有已知数量的单元格,那么就说每个单元的宽度为11,75px。在表格上设置宽度为75x11 = 825px。

Updated code below:

更新的代码如下:

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>