CODEWITHSUNDEEP
htmlcsshtml-table
user623990
user623990

Reputation:

Have a table grow vertically with an expanding div

I currently have:

<div class="generic-block-70">
    <div class="generic-content-70">
        <table id="voteBlock">
            // stuff
    </table>
    </div>
</div>

However, seeing as the generic-block-70 and generic-content-70 do not have a set height and they expand vertically as text is added, I can't simply set my table's style to height: 100%;.

Is there a way around this?

JSFiddle: http://jsfiddle.net/2vLEL/

Upvotes: 0

Views: 5366

Answers (3)

collwyn
collwyn

Reputation: 57

I think I probably had a similar problem. This is how I solved it. I have nested tables within tables. Users clicked a button and Javascript created new table rows and cells and filled the cell with data from a form. In order to force the cell to wrap the text and not expand horizontally, I had to use a <div></div> tag inside the cell. In order to force the "table" to NOT expand vertically as new table rows were added, I had to place <div></div> tags below the <td> containing the .

So, the html created from my javascript might look like this.

<table id="root">
 <tr id="A">
  <td id="1" style="width:200px">Content</td>
  <td id="2" style="width:530px">
   <div height="correct_height" overflowY="auto">
    <table id="comments_table" style="width:510px table-layout:fixed">
     <tr>
      <td style="word-wrap:break-word">
       <div style="width:480px;white-space:nowrap">Comments</div>
      </td>
     </tr>
    </table>
   </div>
  </td>
 </tr>
 .
 .
 .
</table>

The first <td id="1"> is created by a function that runs first. The second <td id="2"> is created by a function that runs after and it grabs the height of the <td id="1"> so that the height of the 2nd cell in the row is dependent on the height of the 1st cell in the row. The widths are arranged as such to allow space for the vertical scroll bar to appear.

You have to subtract any padding that you use. For example if two of the elements have style="padding:5px" then that means 5top 5bottom x 2 elements. So:

var correct_height = A.offsetHeight - 20;

Upvotes: 2

Sparky
Sparky

Reputation: 98758

Set overflow: auto; on your parent div.

http://jsfiddle.net/2vLEL/2/

.generic-content-70 {
    overflow: auto;
}

Upvotes: 3

Eugen Rieck
Eugen Rieck

Reputation: 65342

The code depends on the intention:

  • If you want to lock the table to a height, give it a height: NNpx;
  • If you want to lock the div to a height, give IT a height: NNpx; and an overflow: MM; depending on your needs

Upvotes: 0

Related Questions