Question

My code contains a table that I need to have a fixed width. The table basically has page browsing links. The columns are First,Prev, Some page numbers, Next, Last.
The table gets rendered correctly in both Chrome and Firefox if each of these columns is populated or even if one of (First,Prev) or (Next,last) is populated.

However, if all columns except page number are empty, I get a small row.

The funny thing is that Chrome inspect lists the table width as it should be (about 960px;) but the tbody width is reset to 255px (I don’t even use tbody in my code). I tried setting min-width and table-layout property on each of table,td,tr.

Here is a working code fragment

<div id="maincontent">
        <table id="events_table_end">
            <tr width="100%">
                <td width=5% class="first"></td> 
                <td width=5% ></td> 
                <td width=80%><a href="/events/1?cri=time&amp;order=desc" class="active">1</a></td>
                <td width=5% ></td>
                <td width=5% class="last"></td>
            </tr>
        </table>
    </div>

The relevant CSS portions are:

#maincontent {width:1024px; margin:0 auto; text-align:left;}


#events_table_end {padding:2px; margin:10px; margin-top:0px; padding-top:0; display: block; width:97%; empty-cells:show;}
#events_table_end tr {width:100%; }
#events_table_end td {background:#3F547F;color:#D5DFF3; font-weight:bold;}
#events_table_end a {color:#D5DFF3; padding-right:10px;}
#events_table_end a:hover {color:white;}
#events_table_end a.active {color:#F4F8FF;  text-decoration:none; pointer-events: none; cursor:text;}

#events_table_end td.first {border-bottom-left-radius:15px; -moz-border-radius-bottomleft: 15px;}
#events_table_end td.last {border-bottom-right-radius:15px; -moz-border-radius-bottomright: 15px;}
a.no_underline {text-decoration:none;}
a.table_link:hover {font-weight:bold; color:#122A5A; }

If only this much code is copied onto new HTML file, it is correctly displayed by chrome but not by Firefox.

Any input will be appreciated.

Note: I think the problem can be reproduced on jsfiddle here. Notice how table width is correct but tbody width is not.

Answer 1

Try removing the following declaration from your #events_table_end {} rule:

display: block;

If you were to set a CSS display property for a table, the correct value would be table. But you don’t need to set the display property at all.

An amended Fiddle