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. getlineを分割する方法はありますか？
- 2. InputStreamを分割する方法はありますか？
- 3. logstashを使用してカスタム形式のログファイルをjsonに分割する方法はありますか？
- 4. scanf（）を使用して文字列 "127.0.0.1:1024"を "127.0.0.1"と "1024"に分割する方法はありますか？
- 5. heapsortのheapifyを使用してヒープを2つのサブヒープに分割する方法はありますか？
- 6. メディアクエリを使用してhtmlテーブル内のクラスをターゲットにする方法は？
- 7. Javascriptで多くの値を分割して割り当てるより良い方法はありますか？
- 8. SQLを使用してレコードをあるテーブルに別のテーブルに挿入する方法はありますか？
- 9. XSLTを使用してXMLファイルを分割する方法は？
- 10. Javaを使用してExcelファイルを分割する方法は？
- 11. テーブルを縦に分割する必要がありますか？
- 12. vitessを使用して特定のテーブルのみを分割する方法
- 13. BigQueryのクエリから作成したテーブルを分割する方法はありますか？
- 14. テーブルを分割した後にデータを高速にクエリする方法はありますか？
- 15. VB.Netアプリケーションを分割するかどうかを決定する方法と、分割する方法を決定する方法はありますか？
- 16. postgresqlでテーブルを分割する方法
- 17. 次のメモリ割り当ての方法を使用するかどうかは分かりますか？
- 18. 3つのテーブルを使用してレコードを取得する方法、または3つのテーブルを使用する方法はありますか？
- 19. nltk.parse.stanfordライブラリを使用して文を分割する方法
- 20. PXSplitContainerを使用してPXSmartPanelウィンドウを分割する方法
- 21. 関数を使用してループを分割する方法
- 22. regexを使用してセットクッキーヘッダーを分割する方法
- 23. Binding.scalaを使用してHTMLコンテンツを部分的に分割する方法は？
- 24. フラグ引数を持つメソッドを分割する方法はありますか？
- 25. pxの代わりにcssメディアクエリでDPIを使用する方法はありますか
- 26. PythonでAPIを使用してBigQueryテーブルを分割する
- 27. forループを使用してテーブルの一部を使用する方法はありますか。
- 28. UNIONを使用してrman_backup_job_detailsテーブルのinstanceテーブルとstatusの列instance_nameをマージする方法はありますか？
- 29. 匿名関数を使用してオブジェクトプロパティに値を割り当てる方法はありますか？
- 30. クエリ内の関数を使用して '文字列をテーブル分割'する方法はありますか？私の機能を持つ
あなたはすでにスニペットにしてください書いたコードを提供することができますか？だから私たちはあなたが何をしたのかを見て修正するのを助けることができます！ – Julqas