Question

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

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

有趣的是，Chrome检查列出了应该的表格宽度（大约960px;），但是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上重现。请注意表格宽度是否正确但是tbody宽度不是。

Answer 1

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

display: block;

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

An amended Fiddle

表中的空列重置表宽度

1 个答案: