GlinesMome GlinesMome - 12 days ago 9
CSS Question

Table auto-scroll with min height

I'm using Twitter Bootstrap and I have a pretty annoying problem.
I have a table (call F) with a row and two cells, in the first cell I have another table (called T) and in the second cell some content (called C), see http://jsfiddle.net/mcJvU/.

<table>
<tr><td>
<table class="table table-striped">
<thead>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
</thead>
<tbody>
<tr><td>1</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>2</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>3</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>4</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>5</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>6</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>7</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>8</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>9</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
<tr><td>10</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td></tr>
</tbody>
</table>
</td>
<td>
some<br/>
big<br/>
enough<br/>
content<br/>
but<br/>
may<br/>
be<br/>
empty
</td>
</tr>
</table>


Here is the big deal: T has to contain a huge number of rows and C doesn't have much content, it may be empty.

I want that that T takes all the avaliable place or, if C is smaller, at least prints 3 rows.

I tried fixedheadertable but it is a fixed size height and it has some bugs.

Edit: by "at least prints 3 rows", I mean that T must have a min height that allows to display at least three rows".

Answer

Finally I make it fixed in pure CSS.

Thanks to this: Twitter Bootstrap scrollable table rows and fixed header

Then I have no more print issues.