Table auto-scroll with min height

Question

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".

I don't understand your question. Can you clarify what "at least prints 3 rows" means? — Carol Skelly, May 15 '13 at 22:43
by "at least prints 3 rows", I mean that T must have a min height that allows to display at least three rows". — GlinesMome, May 16 '13 at 05:09
did you try giving width:100% to the main table. do you want something like this? http://jsfiddle.net/mcJvU/3/ — tcgumus, May 16 '13 at 18:42

score 1 · Accepted Answer · edited May 23 '17 at 12:08

1

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.

edited May 23 '17 at 12:08

Community

1
1

answered May 17 '13 at 17:03

GlinesMome

1,549
1
22
35

Table auto-scroll with min height

1 Answers1