私はモバイルデバイスに対応したテーブルを作成しようとしていますが、tdとthの値のブロックを作成しました。問題は、見出しがすべてグループ内で互いに積み重ねられ、データがすべて自分のグループに積み重ねられていることだけです。私はそれを見出しが最初になるようにし、その特定の行のデータ、次の見出しとデータなどを作ります。私はこれをCSSだけを使ってやりたいと思っています。以下は、コピーして貼り付けたコードです。私は本当にそれを完全に理解していないので、PHPで何かを混乱させたくありません。彼は私が表示したいものです:それの下にあるデータを持つ1つのth、次にtdとそのtd、など。タブが自分のコンピュータ上で動作しないため、この質問の要約に私のコードをjsfidleに含めました。あなたの文からcssを使ったテーブルで別のthとtd
答えて
それはそれは少し良く作られたので、私は、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です。
@ user3771102を提供したコードの最初のサンプルは、テーブルを表示する方法です。現在どのようにテーブルが設定されているか。 – crgrainger
https://jsfiddle.net/fws1x7os/これは私のjsfiddleリンクです。テーブルはthから分離して設定されていますが、それは問題だと思いますが、tdをネストすると動作している元のPHPを台無しにしたくありません。 CSSを使用してこれを修正する方法を見つけたいと思います。 – crgrainger
まず、テーブルヘッダーセルを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à。
コードを、好ましくはjsfiddleで共有してください。あなたがしたことを見ることは、実践的な方法であなたを援助する唯一の方法です。 – JBartus
質問には質問自体にコードが含まれている必要があります。 Jsfiddleだけに頼らないでください。さらに、スニペット機能、エディタの '<>'ボタンを使用して、あなたの質問に実際の例を含めてください。 –
現時点ではやや不明な点がありますが、最終結果として必要なものを明確にすることはできますか? –