9

フォームのレイアウトに使用されるテーブルをラップするhtmlテンプレートを作成しています。テーブル自体ではなく、テーブルをラップするhtmlを完全に制御できます。テーブルは、クライアントに送信される前にテンプレートに挿入されます。私はこれをまったく制御できません。私が制御できるのは、テーブルとCSSをラップするhtmlだけです。

このテーブルは、次のような2列のテーブルです。

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <tr>
    <td>this is column 1</td>
    <td>this is column 2</td>
  </tr>
</table>

-------------------------------------------------
|Column 1                   |Column 2           |
-------------------------------------------------
|this is column 1           |this is  column 2  |
-------------------------------------------------

ただし、1つの積み重ねられた列として表示できればと思います。

----------------------------
|Column 1                   |
-----------------------------
|this is column 1           |
-----------------------------
|Column 2                   |
-----------------------------
| this is column 2          |
-----------------------------

JavaScriptを使用せずにCSSのみを使用してこれを実現する方法はありますか？

4

8 に答える 8

21

これをCSSに追加してみてください。

td {
  display: table-row;
}

乾杯。

于 2012-09-10T09:23:47.233 に答える
4

私は最近同様の問題に直面し、良い解決策を見つけたようです。テーブルは頻繁に誤用されるため、ラップが悪くなりますが、可変幅のビューポートでデータのグリッドを表示する必要がある場合は、実際に最も無駄のないオプションです。

元の質問に対する答えはまだありません。JavaScriptを使用せずにこの問題を解決するには、テーブルのマークアップを編集できる必要があります。

テーブルは...大丈夫...大きく伸ばすと見えますが、押しつぶすとひどく見えます。span.label「レスポンシブ」テーブルは、各セル（ ＆span.data要素など）にコンテキストマークアップを追加することによってのみ可能です。この新しい不要な出力はデフォルトで簡単に非表示にでき、レスポンシブビュー状態の場合にのみ表示できます。

table.responsive td .label {
  display: none;
}
<table class="responsive">
    <thead>
        <tr>
            <th>Column Foo</th>
            <th>Column Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="label">Column Foo</span><span class="data">Baz</span></td>
            <td><span class="label">Column Bar</span><span class="data">Qux</span></td>
        </tr>
    </tbody>
</table>

レスポンシブビュー状態の場合、要素を非表示にしてthead要素を表示し.labelます。

table.responsive {
  width: 100%;
}
table.responsive td .label {
  display: none;
}

table.responsive th {
  background-color: #ddd;
}

table.second {
  margin-top: 5em;
}

@media screen and (max-width:640px) {
  table.responsive thead {
    display: none;
  }
  table.responsive tbody th,
  table.responsive tbody td {
    display: block;
  }

  table.responsive td span {
    display: block;
  }
  table.responsive td .label {
    background-color: #ddd;
    font-weight: bold;
    text-align: center;
  }
}

ソリューションをより詳細にカバーするリポジトリを作成しました。ここをクリックして動作を確認してください。

于 2016-08-27T06:13:35.023 に答える
3

    単に; いいえ。JavaScriptがないと、行を2列のテーブルから1列のテーブルに変えることはできません。
    テーブルのコーダーにその方法でテーブルを作成するように指示するか、JavaScriptを使用してテーブルを再構築します。

于 2012-09-10T09:32:31.140 に答える
2

いいえ、これはマークアップを変更せずに合理的に可能ではありません。HTMLのテーブルは、列ではなく行として構造化されています。この例では、コンテンツを並べ替えています。

元の注文：
Column 1 -> Column 2 -> this-is-col-1 -> this-is-col-2

新しい注文：
Column 1 -> this-is-col-1 -> Column 2 -> this-is-col-2

なぜ「合理的に不可能」と言ったのですか？まあ、絶対的なポジショニングと同様のテクニックを使えば、あなたが望むレイアウトを一緒にハックできるかもしれません-しかし、CSSの世界があります-私はそのアプローチが実際のページでうまくいくとは思わないので待っています。

追記：「並べ替え」の問題に追加するために、もう少し簡単に実行できるのは、このレイアウトで、順序は同じままです。

----------------------------
|Column 1                   |
-----------------------------
|Column 2                   |
-----------------------------
|this is column 1           |
-----------------------------
| this is column 2          |
-----------------------------

しかし、それは明らかにあなたが望むものではありません。

于 2012-09-10T09:13:43.023 に答える
0

を使用して、同様のことを実現できますdisplay:block;。

このフィドルを参照してください：http：//jsfiddle.net/R53KH/

于 2012-09-10T09:43:52.427 に答える
0

私が考えることができる唯一の解決策は、マークアップを変更することです。1つの列を取得し、マークアップの行として書き込むように変更します。これが私が作成したフィドルです：http：//jsfiddle.net/MHsxU/

于 2012-09-10T09:44:28.067 に答える
0

まだ問題があり、Chromeにありますか？

（私のように）まだ問題がある場合は<!DOCTYPE html>、ドキュメントの先頭にあることを確認してください。Chromeを無視しない場合は、追加して保持するものを完全に無視するようdisplay: table-cellです。

于 2016-02-11T17:17:38.423 に答える
0

実際、それは信じられないほど簡単です（そして、2行のcssで実行できます）：td幅を100％にして、overflow：autoを設定します。2番目の列は自動的に折り返されます。

于 2018-08-02T03:45:30.880 に答える