HTML table cells stretching by left column height

Question

So I have table like this: http://img607.imageshack.us/img607/5295/1stv.jpg

But I want to do something like this one: http://img684.imageshack.us/img684/3500/2ndjn.jpg

The left column height isn't fixed. The row number on the right isn't fixed either. All I want that rows on the right would equally streched by left column height and filled the whole gap all way to the bottom, like in my second example.

any chance that we can use javascript or css here? or only html? — Netorica, Sep 18 '12 at 06:42

score 0 · Answer 1 · answered Sep 18 '12 at 06:45

you can try it using table-layout:fixed

<table style='table-layout:fixed;'>
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
<tr>
<td>Hello World</td>
<td>Hello World</td>
</tr>
</table>

then set some width and height in your columns and rows as possible

score 0 · Answer 2 · edited May 23 '17 at 12:27

This might work:

HTML

<table>
  <tr>
    <th rowspan="0">pic</th>
      <td>text</td>
      <td>text</td>
  </tr>
    <tr>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
    </tr>
</table>

CSS

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

td, th{
  border: 1px solid #000;
  width: auto;
}

td+th {
  width: auto;
}

th {
  height:300px;
}

Just change the height of a th in the CSS or add different sized pictures to the cell. You may also add a variable number of rows to the HTML.

Note! rowspan=0 might only work with Firefox and Opera. At least it doesn't work with Safari. You might want to add a picture to the left and two columned table to its right if you do not know the row count beforehand or are not able to use php or JavaScript to determine it dynamically.

See also this answer: Table with table-layout: fixed; and how to make one column wider

HTML table cells stretching by left column height

2 Answers2