ID非公開

2022/1/12 12:03

33回答

htmlの<tr>を削除しないまま、JavaScriptかjQueryを使って2つの<tr>を横並びに表示できますか?

JavaScript50閲覧

ベストアンサー

0

その他の回答(2件)

0

■■■ テーブルのレイアウトを崩す ■■■ <tr> が、 テーブルの行として機能しているのは、 CSS において、 <tr> 要素のデフォルトの display プロパティが table-row だから。 テーブルの行としてのレイアウトを崩したい場合は、 CSS の display プロパティを別の値に変更すればいい。 ■■■ 要素を横並びにする ■■■ <tr> 要素を横1列に並べる方法はいろいろある。 【 インラインブロック化 】 <tr> 要素の display を inline-block にすれば、 <tr> 要素はテキストと一緒にテキスト行に並ぶインライン配置になり、 テキスト行に沿って横に並ぶ。 ─[ CSS ]─────────── tr { display: inline-block } ──────────────── 【 フレックスレイアウト 】 <tr> 要素の親要素に対して、 display: flex を指定すれば、 <tr> 要素の親要素の直下がフレックスレイアウトに切り替わるんで、 <tr> はフレックスレイアウトのデフォルトの配置として横並びになる。 注意として、 ──────────────── <table> <tr>~</tr> <tr>~</tr> </table> ──────────────── のように記述しても、 一般的なブラウザでは <tbody> 要素が自動的に補完されて、 ──────────────── <table> <tbody> <tr>~</tr> <tr>~</tr> </tbody> </table> ──────────────── のように変換されて表示されるんで、 <tbody> 要素が <tr> の親要素になる。 だから、 <table> を display:flex にしても効かない。 <tbody> 要素に対して display:flex を指定する。 ──────────────── tbody { display: flex; flex-flow: row nowrap; } tr { flex: 0 0 auto; } ──────────────── なお、 このようなブラウザの補完に依存する曖昧な状況を避けるために、 ブラウザの補完が入らないように、 最初から <tbody> 要素そで囲っておいた方が無難。 ──────────────── <table> <tbody> <tr>~</tr> <tr>~</tr> </tbody> </table> ──────────────── ■■■ Javascript で操作する方法(1) ■■■ CSS を記述する代わりに、 Javascript から、 スタイルシートオブジェクトを参照して、 CSS のスタイルシート指定を直接操作することもできる。 ──────────────── <!-- ── テーブル ── --> <table> <tbody> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> </tbody> </table> <!-- ── スクリプト ── --> <script>{ // スタイルシートオブジェクトを生成 const mysheet = document.querySelector( "head" ). appendChild( document.createElement( "style" ) ).sheet; // 関数:CSS 指定を追加 const css =( selector, csstext )=> mysheet.insertRule( selector+"{"+csstext+"}", mysheet.cssRules.length ); // CSS 指定 css( "tbody", "display: flex ; flex-flow: row nowrap" ); css( "tr", "flex: 0 0 auto" ); }</script> ──────────────── ■■■ Javascript で操作する方法(2) ■■■ スタイルシートオブジェクトに対してではなく、 <tbody> や <tr> の style 属性に、 指定の CSS を書き出す方法もある。 ──────────────── <!-- ── テーブル ── --> <table> <tbody> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> </tbody> </table> <!-- ── スクリプト ── --> <script>{ // HTML 要素 const tbody = document.querySelector( "tbody" ); const tr = tbody.querySelectorAll( "tr" ); // style 指定 tbody.style.display = "flex"; tbody.style.flexFlow = "row nowrap"; tr.forEach( item => item.style.flex = "0 0 auto" ); }</script> ────────────────

0

そういうのはcssでやります

ID非公開

質問者2022/1/12 14:25

cssでどのようにやれば良いでしょうか?