1

display: table css 属性を使用して制御したい HTML があります。残念ながら、私は実際に HTML (または JS のいずれか) を変更することはできず、CSS (長い話) のみを変更できます。既存の HTML の構造がテーブル レイアウトに問題を引き起こしているため、これは問題です。HTML と CSS の簡易バージョンを次に示します。

<style>
    .like-table { display: table;}
    .like-tr { display: table-row;}
    .like-th { display: table-cell; border: 1px solid gray;}
    .useless-div-1 { }
    .useless-div-2 { }
    .like-td { display: table-cell; border: 1px solid gray;}
</style>
<div class="like-table">
    <div class="like-tr">
        <div class="like-th">1</div>
        <div class="like-th">22</div>
        <div class="like-th">3</div>
    </div>
    <div class="useless-div-1"><div class="useless-div-2">
        <div class="like-tr">
            <div class="like-td">111</div>
            <div class="like-td">2</div>
            <div class="like-td">3</div>
        </div>
        <div class="like-tr">
            <div class="like-td">11</div>
            <div class="like-td">2</div>
            <div class="like-td">333</div>
        </div>
    </div></div>
</div>

悲しいことに、これはヘッダーと本文の列幅を異なる幅にレンダリングします。

ここに画像の説明を入力

「useless-div-*」の開始タグと終了タグを削除すると、次のようになります。

<div class="like-table">
    <div class="like-tr">
        <div class="like-th">1</div>
        <div class="like-th">22</div>
        <div class="like-th">3</div>
    </div>
    <div class="like-tr">
        <div class="like-td">111</div>
        <div class="like-td">2</div>
        <div class="like-td">3</div>
    </div>
    <div class="like-tr">
        <div class="like-td">11</div>
        <div class="like-td">2</div>
        <div class="like-td">333</div>
    </div>
</div>

次に、ヘッダーと本文の列幅を揃えて、適切にレンダリングします。

ここに画像の説明を入力

では、HTML の最初のセットを 2 番目のセットのように動作させる CSS に対してできることはありますか? HTML や JavaScript を変更することはできません。CSS だけ です。理由は聞かないでください...

コードをいじるには、ここをクリックしてください。

4

1 に答える 1

3

table-row要素をでラップしているので、の プロパティをにuseless-div設定するだけです。displayuseless-divtable-row-group

.useless-div { display: table-row-group; }

CSS テーブル レイアウトでは、すべての要素が同じ構造プロパティに従う必要があります。

これがJSBin Demoです。

アップデート

このことで過去 5 時間頭を悩ませた後、現在の方法ではこれを処理することは不可能であることに気付きました。

そこで、新しいスタイルを記述して柔軟な CSS テーブルを作成することにしました。ただし、最初にいくつかのことを言及する必要があります。

  • 列を垂直方向に整列させるには、セルに特定の幅を設定する必要があります。
  • 次の例では、テーブルをより適切に表示するために境界線を設定しています。そのため、box-sizingプロパティを使用して、パディングとボーダーを含む各セルの幅をブラウザーに強制的に計算させました。が必要ない場合は、それとプロパティもborder削除します。border-box

アプローチ

.like-table {
  width: 400px;    /* You could declare a specific width. Your choice */
  margin: 0 auto;
}

.like-th, .like-td {
  float: left;    /* <--  Float the cells to stick together                    */
  width: 33.33%;  /* <--  I applied the same width on each cell.               */
  /* I've explained how to set specific width for each column in the following */

  border: 1px solid gray;          /* Add border around each cell */

  -webkit-box-sizing: border-box;  /* Force browser to calculate width+borders */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.like-tr:after { /* Clearfix hack */
  content: ' ';
  font: 0/0 a;
  display: block;
  clear: both;
}

注:各列 (左 + 中央 + 右) に特定の幅を適用するには、まず上記のように各セルwidthに aを設定し、次のセレクターを使用して左右の列に適用された幅をオーバーライドします。 

.like-table .like-td:first-child, /* Selectors for the left column */
.like-table .like-th:first-child { 
  width: 100px;     /*  <-- Override the width for the left column */
  border-right: 0;  /* You might also want to remove right borders */
}

.like-table .like-td:last-child,  /* Selectors for the right column */
.like-table .like-th:last-child {
  width: 100px;      /* <-- Override the width for the right column */
  border-left: 0;    /* You might also want to remove left borders  */
}

JSBin デモ #1。(流体幅)

JSBin デモ #2。(固定幅)

于 2013-08-29T17:00:11.423 に答える