html fix first column and same height other columns

Question

I want fix first column of table, but I have a problem that if first column has more height than others, then the other columns don't have the same height.

This is my code:

<div class="outer">
  <div class="inner">
    <table>
        <tr>
          <th>Header A</th>
          <td>col 1 - A</td>
          <td>col 2 - A (WITH LONGER CONTENT)</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
        </tr>
        <tr>
          <th>Header B</th>
          <td>col 1 - B</td>
          <td>col 2 - B</td>
          <td>col 3 - B</td>
          <td>col 4 - B</td>
          <td>col 5 - B</td>
        </tr>
        <tr>
          <th>Header C
          Header C
            Header C
            Header C
          </th>
          <td>col 1 - C</td>
          <td>col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
        </tr>
    </table>
  </div>
</div>

table {
  table-layout: fixed; 
  width: 100%;
  *margin-left: -100px;/*ie7*/
}
td, th {
  vertical-align: top;
  border-top: 1px solid #ccc;
  padding:10px;
  width:100px;
}
th {
  position:absolute;
  *position: relative; /*ie7*/
  left:0; 
  width:100px;
}
.outer {position:relative}
.inner {
  overflow-x:scroll;
  overflow-y:visible;
  width:400px; 
  margin-left:100px;
}

Here is an example; how I can resolve it ?

http://jsbin.com/uxecel/4457/edit

I want that row height do the same in all the row, and not fixed because this is dinamic.

Thanks

See this question: http://stackoverflow.com/questions/10701562/how-to-make-all-the-rows-of-a-table-the-same-height-as-the-biggest-one — i alarmed alien, Aug 17 '14 at 17:26

score 0 · Answer 1 · answered Aug 17 '14 at 17:13

0

Do you mean this?

http://jsfiddle.net/AlexCharlton/5d4yqn7a/1/

Add:

height: 80px;

To:

td, th {
  vertical-align: top;
  border-top: 1px solid #ccc;
  height: 80px;
  padding:10px;
  width:100px;
}

Alternatively, their is this method, where you can apply a class to specific rows/columns like follows..

http://jsfiddle.net/AlexCharlton/5d4yqn7a/2/

HTML:

<td class = "Long">col 2 - A (WITH LONGER CONTENT)</td>

CSS:

td.Long {
   width: 280px;
}

answered Aug 17 '14 at 17:13

Alex

1,208
16
26

I want that height grow up automatic, if i add more content the problem persist.. It is charged dinamic http://jsfiddle.net/5d4yqn7a/4/ – Marc Morales Valldepérez Aug 17 '14 at 17:20
Just add: Height: auto; ? – Alex Aug 17 '14 at 17:24
Nvm, That doesn't work, let me have a think how you can resolve that, 2 mins – Alex Aug 17 '14 at 17:25
I Don't think it's possible with just html and css, you might need to apply some javascript, the solution for html and css only will be just to apply separate classes depending on how high/wide you need each row/column – Alex Aug 17 '14 at 17:31

html fix first column and same height other columns

1 Answers1