0

私のコードには、固定幅が必要なテーブルが含まれています。表には基本的にページ閲覧リンクがあります。列は、First、Prev、いくつかのページ番号、Next、Last です。これらの各列が入力されている場合、または (First,Prev) または (Next,last) のいずれかが入力されている場合でも、Chrome と Firefox の両方でテーブルが正しくレンダリングされます。

ただし、ページ番号を除くすべての列が空の場合、小さな行が表示されます。

面白いことに、Chrome inspect はテーブルの幅を本来あるべき (約 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で再現できると思います。表の幅は正しいのに、本体の幅が正しくないことに注意してください。

4

1 に答える 1

1

#events_table_end {}ルールから次の宣言を削除してみてください。

display: block;

テーブルの CSSdisplayプロパティを設定する場合、正しい値はtable. displayただし、プロパティを設定する必要はまったくありません。

修正されたフィドル

于 2012-06-18T09:05:33.203 に答える