0

(グリッド内の) 4 つのテーブルを含むテーブルを、4 つのテーブルをセルとして含む div テーブルに置き換えました。私が絶対にうまくいかないように見える2つのことは次のとおりです。

  1. を使用して div タグの表の境界線を取り除くにはどうすればよいdisplay: tableですか?

  2. 左下のテーブルは、セルの左端に揃えることを主張していますが、セルの右端に揃えたいと思っています。相対的な位置付けでさえ、これには影響しません。

CSSは次のとおりです。

<style type="text/css">
    .Dashboard {
        display: table;
        border-collapse: collapse;
        border-width: 0px;
    }
    .row1 {
        display:table-row;
    }
    .row2 {
        display:table-row;
        height: 200px;
    }
    .cell1 {
        display: table-cell;
        padding: 2px;
        border: 1px solid black;
    }
    .cell2 {
        display: table-cell;
        padding: 2px;
        border: 1px solid black;
    }
    .cell3 {
        display: table-cell;
        padding: 2px;
        border: 1px solid black;
        text-align: right;
        vertical-align: top;
    }
    .cell4 {
        display: table-cell;
        padding: 2px;
        border: 1px solid black;
    }
    table.inner {
        border-collapse: collapse;
        border: 2px solid black;
        text-align: center;
        padding: 2px;
    }
    td {
        border-collapse: collapse;
        border: 2px solid black;
        text-align: center;
        padding: 2px;
    }
    td.image {
        padding: 0;
        margin: 0;
    }
</style>

また、テーブル レイアウトは次のようになります。

<div runat="server" id="Dashboard" class="Dashboard">
    <div class="row1">
        <div class="cell1">
            <table class="inner" id="t1">
                <tr>...</tr>
                ...
                <tr>...</tr>
            </table>
        </div>
        <div class="cell2">
            <table class="inner" id="t2">
                <tr>...</tr>
                ...
                <tr>...</tr>
            </table>
        </div>
    </div>
    <div class="row2">
        <div class="cell3">
            <table class="inner" id="t3">
                <tr>...</tr>
                ...
                <tr>...</tr>
            </table>
        </div>
        <div class="cell4">
            <table class="inner" id="t4">
                <tr>...</tr>
                ...
                <tr>...</tr>
            </table>
        </div>
    </div>
</div>

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

4

1 に答える 1

0

境界線を取り除くには、

border: none;

ポジショニングで、左下のテーブルIDを見つけて使用します

float: right;

しかし、あなたの最善の選択肢はとにかくテーブルを取り除くことです。これはすべて、ストレートcssを使用して同じように簡単に実行できます。

于 2012-06-20T15:19:52.913 に答える