0
A
答えて
0
あなたは、ディスプレイをリセットし、フレックスモデルを使用することができます：あなたはそれが起こる必要があるたび
/* break table */
tr {
display: flex;
flex-wrap: wrap;
width: 100%;
}
td {
display: block;
width: 50%;
text-align: center;
}
td[colspan] {
width: 100%;
}
/* demo purpose */
table {
counter-reset: tds;
counter-increment: tds -1;
width: 100%;
}
td {
border: solid 1px;
}
td:before {
counter-increment: tds;
content: 'TD 'counter(tds);
}
body {
width: 500px;
margin: auto;
}
* {
box-sizing: border-box;
}<table>
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>使用mediaqueriesは、表示を更新します。DEMO
+0
これは私のために働いた！あなたはとても役に立ちます！ありがとう:) – Maciej
0
私はそれだけでCSSを使用してテーブルを分割することが可能であることとは思いません。あなたが望むことをやり遂げるためには、JSを使用する必要があり、ウィンドウの幅に応じてテーブルを再構築します。
あなたはちょうどあなたがここにいくつかの興味深い技術を持って、あなたのサイトはより敏感にするために検索している場合は、：https://css-tricks.com/responsive-data-table-roundup/
0
本当に不可JavaScriptをせずに、あなたのスタイルテーブルのカラムの区切りはできません。
他のオプションは、フレックスボックスグリッドを使用してdivにテーブルをやり直すことです。
0
これは、どの表のためのものではありません。あなたはテーブルのスタイルをハックすることができますが、それは悪い習慣です。より簡単には、例えば使用することになります。
古いブートストラップグリッド - https://getbootstrap.com/
以上フレキシボックス - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
編集テーブル、TR、TBODYや他の人が表示されるが、それは（それが機能だ破壊するだけでなく悪い習慣です垂直方向の整列など）。 divを使用してレスポンステーブルとしてスタイルを設定するだけです。フレックスボックスや少なくともブートストラップグリッドを使ってスタイリングするのがベストでしょう。
0
これはあなたに役立つと思います。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table responsive</title>
<style>
body {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
table {
width:100%;
text-align:center;
}
td {
border-bottom:1px solid #ccc;
padding:10px 0;
}
@media (max-width:600px) {
table {
display:block;
width:100%;
padding:0;
margin:0 auto;
}
tbody, tr {
display:block;
width:100%;
}
table td {
display:inline-block;
float:left;
width:50%;
}
td[colspan="2"] {
display:block;
width:100%;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>TD00</td>
<td>TD01</td>
<td colspan="2">Colspan 2</td>
<td colspan="2">Colspan 2</td>
</tr>
<tr>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
</tr>
<tr>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
</tr>
<tr>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
</tr>
</table>
</body>
</html>
0
この1
<style type="text/css">
td {
border: 1px solid;
text-align: center;
}
.t1{
margin: 0 auto;
text-align: center;
min-width: 600px;
}
.t2{
margin: 0 auto;
text-align: center;
display: none;
}
@media (max-width: 600px){
.t1{display: none;}
.t2{display: table;width: 100%;}
}
</style>
HTMLを試してみてください
<tr>
<td>dsds</td>
<td>dsdsd</td>
<td colspan="2">sds</td>
<td colspan="2">dsdd</td>
</tr>
<tr>
<td>dsds</td>
<td>dsdsd</td>
<td>sds</td>
<td>dsdd</td>
<td>sds</td>
<td>dsdd</td>
</tr>
<tr>
<td>dsds</td>
<td>dsdsd</td>
<td colspan="2">sds</td>
<td colspan="2">dsdd</td>
</tr>
<tr>
<td>dsds</td>
<td>dsdsd</td>
<td>sds</td>
<td>dsdd</td>
<td>sds</td>
<td>dsdd</td>
</tr>
<tr>
<td>dsds</td>
<td>dsdsd</td>
</tr>
<tr>
<td colspan="2">sds</td>
</tr>
<tr>
<td colspan="2">dsdd</td>
</tr>
<tr>
<td>dsds</td>
<td>dsdsd</td>
</tr>
関連する問題
- 1. InputStreamを分割する方法はありますか？
- 2. メディアクエリを使用してhtmlテーブル内のクラスをターゲットにする方法は？
- 3. Javascriptで多くの値を分割して割り当てるより良い方法はありますか？
- 4. Javaを使用してExcelファイルを分割する方法は？
- 5. XSLTを使用してXMLファイルを分割する方法は？
- 6. SQLを使用してレコードをあるテーブルに別のテーブルに挿入する方法はありますか？
- 7. テーブルを縦に分割する必要がありますか？
- 8. BigQueryのクエリから作成したテーブルを分割する方法はありますか？
- 9. テーブルを分割した後にデータを高速にクエリする方法はありますか？
- 10. VB.Netアプリケーションを分割するかどうかを決定する方法と、分割する方法を決定する方法はありますか？
- 11. nltk.parse.stanfordライブラリを使用して文を分割する方法
- 12. 関数を使用してループを分割する方法
- 13. PXSplitContainerを使用してPXSmartPanelウィンドウを分割する方法
- 14. regexを使用してセットクッキーヘッダーを分割する方法
- 15. フラグ引数を持つメソッドを分割する方法はありますか？
- 16. pxの代わりにcssメディアクエリでDPIを使用する方法はありますか
- 17. クエリ内の関数を使用して '文字列をテーブル分割'する方法はありますか？私の機能を持つ
- 18. 匿名関数を使用してオブジェクトプロパティに値を割り当てる方法はありますか？
- 19. 2つに分割してリストを並べ替えるすっきりした方法はありますか？
- 20. splitまたはjoinを使用してタグを分割する方法
- 21. 列を使用してDataFrameをグループに分割する方法は？まず
- 22. バックスラッシュを使用して分割する方法
- 23. $ httpを使用してangularjsページ分割する方法
- 24. DBテーブルを分割して負荷を分散しますか？
- 25. メディアクエリを使用してレスポンダーフッターを作成する方法
- 26. テキストファイルに複数回線を分割する方法はありますか？
- 27. プロセス内のpthreadsにタイムスライスを分割する方法はありますか？
- 28. VB.NETでテキストを分割する簡単な方法はありますか？
- 29. コンボボックスのアイテムを視覚的に分割する方法はありますか？
- 30. substrを使ってC++でユーザ定義の文を単語に分割する方法はありますか？
あなたはすでにスニペットにしてください書いたコードを提供することができますか？だから私たちはあなたが何をしたのかを見て修正するのを助けることができます！ – Julqas