How to make elements in table same height?

Question

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/

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!

EDIT: This is what I have till now: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.

This is what I want to achieve:

you want them all to be the same height and have a maximum height like 90px? — Narek-T, Jan 23 '16 at 11:28
Equal heights: simple and easy with flexbox: http://stackoverflow.com/a/33815389/3597276 — Michael Benjamin, Jan 23 '16 at 12:53
@Narek-T, no that is not what I want. See the EDIT: section in my question for an image of what I want to achieve. — blobliebla, Jan 23 '16 at 13:38
@Michael_B, I don't think that is going to solve my problem. See the EDIT: section in my question for an image of what I want to achieve. — blobliebla, Jan 23 '16 at 13:39

Narek-T · Accepted Answer · 2016-01-23T14:23:07.470

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

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

Nick · Answer 2 · 2016-01-23T11:48:26.357

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:

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

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.

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

edited Jan 23 '16 at 11:48

answered Jan 23 '16 at 11:26

Nick

13,493
8
51
98

I want that all of the divs in the row get the same height as the tallest – blobliebla Jan 23 '16 at 11:32
so my fiddle works, just remove the #b style and they are all the same height – Nick Jan 23 '16 at 11:33
if you change #j style as well, you can see that all the tds are the same height as you put into #j – Nick Jan 23 '16 at 11:34
but if I set the td height to 100px and the #j height to 200px, all of the other divs are not 200px. – blobliebla Jan 23 '16 at 11:39
if you want to have all the same height, why would you set one do be double the height? if you want dynamic change, you cannot do it with html/css only, but you must use javascript – Nick Jan 23 '16 at 11:40

Stickers · Answer 3 · 2016-01-23T14:16:14.573

There are a couple of problems:

It's missing <tr> tag, which is invalid HTML.
Remove display: inline-block; on the td, it breaks the default table layout, and prevents the cells from matching height.
border-collapse: collapse; must be set on table, not td.
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.
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.

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>

How to make elements in table same height?

3 Answers3