0

私は Web プログラミングが初めてで、作業中の Web ページの最初のドラフトには、テーブル内にテーブルがありました。さらに読んでみると、外側のテーブルを div としてレンダリングし、外側の div のセルにテーブルをネストする方がスタイルが良いことがわかりました。ただし、テーブル タグを div に切り替えるとすぐに、すべてが表示されなくなりました。明らかな何かが欠けていると確信しています。コードは次のとおりです。

CSS:

.Dashboard
{
    display: table;
    table-layout: fixed;
    height: 500px;
    width: 500px;
}
.col
{
    display: table-column;
}
.cell1
{
    display: table-cell;
    border: 1px solid black;
}
.cell2
{
    display: table-cell;
    border: 1px solid black;
}
.cell3
{
    display: table-cell;
    border: 1px solid black;
}
.cell4
{
    display: table-cell;
    border: 1px solid black;
}
table.inner, td
{
    border-collapse: collapse;
    border: 2px solid black;
    text-align: center;
    padding: 2px;
}
td.image
{
    padding: 0;
    margin: 0;
}

HTML:

<form id="form1" runat="server">
<asp:Label runat="server" ID="label"></asp:Label>
<div runat="server" id="Dashboard" class="Dashboard">
    <div class="col">
        <div class="cell1">
            <table class="inner" id="t1">
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr><...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
            </table>
        </div>
        <div class="cell2">
            <table class="inner" id="t2">
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
            </table>
        </div>
    </div>
    <div class="col">
        <div class="cell3">
            <table class="inner" id="t3">
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
            </table>
        </div>
        <div class="cell4">
            <table class="inner" id="t4">
                <tr>...</tr>
            </table>
        </div>
    </div>
</div>
</form>
</body>
</html>

現時点ではすべてのセルが同じですが、変更される可能性があります。したがって、4 つの異なる CSS 仕様があります。

アドバイスをいただければ幸いです。

4

2 に答える 2

0

table less実際に表形式のデータを表示する場合を除き、HTML をマークアップに使用することをお勧めします。テーブルはTabular data! ただし、あなたの場合、問題はdisplay:CSS プロパティにあります。display:block; を入れた場合。table-celletc の代わりに、レイアウトがページに表示され始めます。だから私はW3schoolsを見てみることをお勧めします

于 2012-06-18T13:47:13.297 に答える
0

コードの唯一の間違いは、display:table-columnに.colを使用していることです。それを削除するか、 table-cell または table-row に変更してみてください。コードは機能するはずです。

于 2012-06-18T14:03:53.483 に答える