web-dev-qa-db-ja.com

CSS表示を使用したレスポンシブテーブル：table-row

テーブルをよりレスポンシブデザインに変換するのに問題があります。Googleで多くのリソースを試しましたが、それらはすべて制限されており、意図したとおりに機能しません。私が抱えている根本的な問題は、テーブルが動的に生成され、Googleで見つけたリソースを編集したくないので、テーブルを簡単に更新でき、コードをあまり混乱させないことです。

とにかく、私のテーブルは本当にシンプルなデザインです。 X行の5つの列があります（データベースから生成されているものによって異なります）。ユーザーがブラウザーのサイズを変更するときはいつでも（または携帯電話を使用しているとき）、テーブルを変更して、小さい画面にも収まるようにします。この例は次のとおりです。

デスクトップ

Header 1 | Header 2 | Header 3
------------------------------
Content  | Content  | Content

電話

Header 1 | Content
------------------
Header 2 | Content
------------------
Header 3 | Content

画面が特定の幅に達するたびにCSSを使用してdisplay: table-rowを使用してこれを達成しようとしています。現在のコードを表示するために、 this jsfiddle を作成しました。ただし、現在、thとtdは上下に垂直に表示されており、意図したように隣り合って表示されていません。 float: leftとfloat: rightを使用してみましたが、機能しません（jsfiddleを参照）。 CSSを使用して私が望むことを達成するのを誰かが助けてくれますか？それが不可能な場合は、ページが読み込まれたときにテーブルがすべて生成されるわけではないことを念頭に置いて、これにJavascriptを使用する方法を教えてください（一部はページに動的に追加されます）。

htmlcsshtml-tablecss-tables
6
Kevin Voorn

thead要素とtbody要素を使用して、次のように試すことができます。

http://jsfiddle.net/uzsw7s4o/

[〜＃〜] css [〜＃〜]

@media screen and (max-width: 750px) {
    tbody, thead { float: left; }
    thead { min-width: 120px }
    td,th { display: block }
}
6
fcalderan

さまざまな画面幅に合わせてtable定義を調整するのはどうですか。これにより、要素をフローティングすることによる予期しない副作用も防止されます。

サイズ変更可能なフィドル

.table {
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
}
@media screen and (max-width: 750px) {
  .cell {
    display: block;
  }
  .row {
    display: table-cell;
    width: 50%;
  }
}
<div class="table">
  <div class="row">
    <div class="cell">Head #1</div>
    <div class="cell">Head #2</div>
    <div class="cell">Head #3</div>
    <div class="cell">Head #4</div>
  </div>
  <div class="row">
    <div class="cell">Content #1</div>
    <div class="cell">Content #2</div>
    <div class="cell">Content #3</div>
    <div class="cell">Content #4</div>
  </div>
</div>
5
SW4

私はあなたにフィドルをフォークしました。それは私がそれを解決する方法です：

HTML

<div class="row">
    <span>Head #1</span>
    <span>Head #2</span>
    <span>Head #3</span>
    <span>Head #4</span>
</div>
<div class="row">
    <span>Content #1</span>
    <span>Content #2</span>
    <span>Content #3</span>
    <span>Content #4</span>
</div>

CSS

.row
{
    display: table-row;
}
.row > *
{
    display: table-cell;
}

@media screen and (max-width: 750px) {
    .row
    {
        display: block;
        float: left;
    }
    .row > *
    {
        display: block;
    }
}
1
Joshua Behrens