0

我的代码包含一个需要固定宽度的表格。该表基本上有页面浏览链接。这些列是First、Prev、Some page numbers、Next、Last。如果填充了这些列中的每一个，或者即使填充了 (First,Prev) 或 (Next,last) 中的一个，该表在 Chrome 和 Firefox 中都会正确呈现。

但是，如果除页码以外的所有列都是空的，我会得到一小行。

有趣的是，Chrome 检查列出了应有的表格宽度（大约 960 像素；）但 tbody 宽度被重置为 255 像素（我什至没有在我的代码中使用 tbody）。我尝试在每个 table、td、tr 上设置 min-width 和 table-layout 属性。

这是一个工作代码片段

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

相关的 CSS 部分是：

#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; }

如果仅将这么多代码复制到新的 HTML 文件中，它会被 chrome 正确显示，但不能被 Firefox 正确显示。

任何输入将不胜感激。

注意：我认为这个问题可以在 jsfiddle here上重现。请注意表格宽度如何正确但 tbody 宽度不正确。

4

1 回答 1

1

#events_table_end {}尝试从您的规则中删除以下声明：

display: block;

如果要display为表格设置 CSS 属性，则正确的值为table. 但是您根本不需要设置该display属性。

修改后的小提琴

于 2012-06-18T09:05:33.203 回答