html - 表格中的空列重置表格宽度

Question

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

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

有趣的是，Chrome 检查列出了表格宽度，它应该是(大约 960 像素；)但是 tbody 宽度被重置为 255px(我什至没有在我的代码中使用 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 .请注意表格宽度如何正确但主体宽度不正确。

Answer 1

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

display: block;

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

An amended Fiddle