CODEWITHSUNDEEP
csshtmlhtml-tablecell
user5543114
user5543114

Reputation:

How to make <td> elements in table same height?

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:

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

Upvotes: 2

Views: 22238

Answers (3)

Narek-T
Narek-T

Reputation: 1918

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.

Upvotes: 3

Stickers
Stickers

Reputation: 78786

There are a couple of problems:

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

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

  3. border-collapse: collapse; must be set on table, not 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.

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>

Upvotes: 0

Nick
Nick

Reputation: 14283

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.

Upvotes: 1

Related Questions