cssを使ったテーブルで別のthとtd

Question

私はモバイルデバイスに対応したテーブルを作成しようとしていますが、tdとthの値のブロックを作成しました。問題は、見出しがすべてグループ内で互いに積み重ねられ、データがすべて自分のグループに積み重ねられていることだけです。私はそれを見出しが最初になるようにし、その特定の行のデータ、次の見出しとデータなどを作ります。私はこれをCSSだけを使ってやりたいと思っています。以下は、コピーして貼り付けたコードです。私は本当にそれを完全に理解していないので、PHPで何かを混乱させたくありません。彼は私が表示したいものです：それの下にあるデータを持つ1つのth、次にtdとそのtd、など。タブが自分のコンピュータ上で動作しないため、この質問の要約に私のコードをjsfidleに含めました。あなたの文から

Answer 1

それはそれは少し良く作られたので、私は、TDと目表示値ブロックを作りました。問題は、見出しがすべてグループ内で互いに積み重ねられ、データがすべて自分のグループに積み重ねられていることだけです。

thとtdにdisplay:blockを追加すると、あなたの内容を一つのセルに積み重ねるようになりますと、それは次のようになります。

header1 
content1 
content2 
content3 
header2 
content1 
content2 
content3 

または

header1 
header2 
content1 
content2 
content3 
content1 
content2 
content3 

私が作りたいですそれで見出しが最初にあり、次にその特定の行のデータ、次に見出しとデータなどがあります。

私はあなたがあなたのテーブルには、次のようになりたいことを推測している：ここで

header1 | content1 | content2 | content 3 
header2 | content1 | content2 | content 3 
header3 | content1 | content2 | content 3 

はあなたjsfiddleからJSFiddle

UPDATE

の例であり、あなたは本当に<tr>をテーブルに持っていませんか？ <tr>は<th>を<td>から分離するものです。私はあなたのjsfiddleから<tr>を追加し、それが次のようになります。

がしたい、そのテーブルですか？ Jsfiddleです。

Answer 2

まず、テーブルヘッダーセルをthead要素に、その他の表セルをtbodyに配置します。後にのthをコピーして先頭に追加する前に、最初にtdのtbodyのtrをコピーして前に付けることができます。申し訳ありませんが、それを明確にするのは簡単ではありません。ここでの例では、あなたが携帯しているとき、あなたがtheadを隠すだけtbody thを表示する必要があり、CSSで

<table> 
     <thead> 
      <tr> 
       <th>header1</th> 
       <th>header2</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr> 
       <th>header1</th><!-- as in the thead --> 
       <td>Content1</td> 
       <td>Content2</td> 
      </tr> 
      <tr> 
       <th>header2</th><!-- as in the thead --> 
       <td>Content1</td> 
       <td>Content2</td> 
      </tr> 
     </tbody> 
    </table> 

です。タブレット/デスクトップでは逆の操作を行います。

<style> 
    /* Mobile first */ 
    table, 
    thead, 
    tbody, 
    tr, 
    th, 
    td { 
     display:block; 
    } 

    th, 
    td { 
     text-align:left; 
    } 

    th { 
     background:#f00; 
    } 

    td { 
     background:#0099ff; 
    } 

    thead { 
     display:none; 
    } 

    tr { 
     margin-bottom:16px; 
    } 

    /* When you going up 768px */ 
    @media screen and (min-width:768px) { 
     table { 
      border:2px solid #000; 
      display:table; 
      width:100%; 
     } 

     tr { 
      display:table-row; 
     } 

     td, 
     th { 
      display:table-cell;     
     } 

     thead, 
     tbody { 
      display:table-header-group; 
     } 

     tbody th { 
      display:none; 
     }    
    } 
    </style> 

フィドル：https://jsfiddle.net/uc8q0u96/。

データがtbodyのtrの全ての第1 tdの属性と対応するヘッダセルの内容を入れ作成する掃除機であってもよい：

<table> 
     <thead> 
      <tr> 
       <th>header1</th> 
       <th>header2</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr>      
       <td data-header="header1">Content1</td> 
       <td>Content2</td> 
      </tr> 
      <tr>      
       <td data-header="header2">Content1</td> 
       <td>Content2</td> 
      </tr> 
     </tbody> 
    </table> 

とコンテンツをフェッチする::before擬似要素を使用して

/* Mobile first */ 
    table, 
    thead, 
    tbody, 
    tr, 
    th, 
    td { 
     display:block; 
    } 

    td[data-header]:before { 
     background:yellowgreen; 
     content:attr(data-header); 
     display:block; 
    } 

    th, 
    td { 
     text-align:left; 
    } 

    th { 
     background:#f00; 
    } 

    td { 
     background:#0099ff; 
    } 

    thead { 
     display:none; 
    } 

    tr { 
     margin-bottom:16px; 
    } 

    /* When you going up 768px */ 
    @media screen and (min-width:768px) { 
     table { 
      border:2px solid #000; 
      display:table; 
      width:100%; 
     } 

     tr { 
      display:table-row; 
     } 

     td, 
     th { 
      display:table-cell;     
     } 

     thead, 
     tbody { 
      display:table-header-group; 
     } 

     td[data-header]:before { 
      display:none; 
     } 
    } 

フィドルhttps://jsfiddle.net/o9mtfsdL/3：CSSでdata-header属性の。

Voilà。