CODEWITHSUNDEEP
htmlcss
Janne
Janne

Reputation: 1151

CSS table 100% width, td width

Edit 2:

Problem seemed to reside on "bigTable" elements th rules. Apparently th's were inheriting wrong min-width's when used on layout-template. I'm still investigating this.

Still, I'm going to give one more try for divs. One big problem was using fixed nav and dynamic content, but I already found Holy Grail -solution for this (http://alistapart.com/article/holygrail).

Thanks for suggestions & all the lovely trolololo.

Edit:

I replicated this problem to http://jsbin.com/eyitij/4/edit

I have a strange problem with table + td width. I have code similar to this:

<table class="mainLayout" style="width: 100%;">
    <tr>
        <td style="width: 250px;">
            <div id="leftNavigationPanel"> * content * </div>
        </td>
        <td id="panelCell">
            <div class="panel">
                 <table id="bigTable" width="100%"> * LOTS OF CONTENT, includes big table * </table>
            </div>
        </td>
    <tr>
</table>

When I run this code on browsers, mainLayout is getting overflowed, so it becomes 3600px, and this happens because of big table inside Panel.

Big table I'm referring to can be contained within screen. When done so, it gets horizontal scrollbar (which is what I want). This works if big-table is loaded in separate html-file with rule "width: 100%".

After adding mainLayout a rule "display: block;", mainLayout table is rendered ~1800px and is contained within screen, but problem is that "panelCell"-TD is still ~3400px wide, so I'm still having whole page scrolling... TD isn't contained within table, but always expands to 250px + bigTable.width() !?

Basically browser doesn't know how to calculate "panelCell" to fill only : window.width - leftNavigationPanel.

Any ideas how to make right rules without using javascript + precalculated max-width rule for "panelCell"?

Upvotes: 3

Views: 11347

Answers (1)

Jean-Georges
Jean-Georges

Reputation: 688

Setting table-layout:fixed fixes a lot of weird problems with tables :

<table style="table-layout:fixed;">
<col style="width:250px"/>
<col/>
<tr>
...

Upvotes: 10

Related Questions