プログラミング html-table

6

私は次のコードを使用しています。CSSを使用してこのテーブルをページの中央に配置するにはどうすればよいですか？ <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>The Main Page</title> </head> <body> <table> <tr> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> </tr> </table> </body> </html>

81 html css html-table center

15

JSON配列をjQueryでHTMLテーブルに変換する

いくつかのフィールドを除いて、JSONオブジェクトの配列を取得してHTMLテーブルに変換する本当に簡単な方法はありますか？または、これを手動で行う必要がありますか？

80 javascript jquery json ajax html-table

4

HTMLの複数の行にまたがるテーブルヘッダーを作成するにはどうすればよいですか？

次のようにテーブルを作成したいと思います。 | Major Heading 1 | Major Heading 2 | | Minor1 | Minor2 | Minor3 | Minor4 | ---------------------------------------------- | col1 | col2 | col3 | col4 | rest of table ... TH要素の行が1行しかないので、列が並ぶなどのヘッダー行を作成するにはどうすればよいですか？列幅が揃わないため、階層テーブルは適切なオプションとは思えません。また、colspan付きのTHタグで2行を使用することもできません。

80 html html-table

5

CSSを使用して、「A」を「B」の下端/端に「ぴったり」配置する方法。「B」の幅とテキストの折り返しが不明

現在ソートされている列のヘッダーにアイコンが表示される「ソート可能な」テーブルがあります。ソートアイコンはテキストの最後に表示されます（つまり、LTR / RTLをサポートしています）。現在を使用していdisplay:flexます。ただし、テーブルの幅が小さくなり、列ヘッダーのテキストが折り返され始めると、並べ替えられている列が明確でないあいまいな状態になります。代わりに、次の要件を満たしたいと思います。アイコンは常に、テキストの最長の行の「端」に「ぴったり」と位置合わせされます（ラッピングセル/ボタンが広い場合でも）。アイコンは、テキストの最後の行と下揃えにする必要もあります。アイコンはそれ自体の行に折り返してはなりません。ボタンが存在し、セルの幅全体に及ぶ必要があります。（内部のスタイル設定であり、マークアップは必要に応じて変更できます。） CSSとHTMLは、可能な場合のみ。既知の/設定された列幅やヘッダーテキストに依存することはできません。例えば：私はの異なる組み合わせの束を試してきましたdisplay: inline/inline-block/flex/grid、position、::before/::after、とさえfloat（！）が、所望の動作を得ることができません。これが問題を示す私の現在のコードです： .table { border-collapse: collapse; width: 100%; } .thead { border-bottom: 3px solid #d0d3d3; } .thead .tr { vertical-align: bottom; } .button { padding: 1rem; text-align: start; font-family: Arial, "noto sans", sans-serif; font-size: 0.875rem; border: 0; background-color: …

9 html css layout html-table alignment

タグ付けされた質問 「html-table」

タグ付けされた質問「html-table」