HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (981ﾚｽ)
上下前次1-新
130: 2023/09/12(火)17:22 ID:??? AAS
>>127
俺も 2
131: 2023/09/12(火)19:02 ID:??? AAS
自分は1
hiddenにしていくなら1が自然だと思う
絞り込み検索って書いておいてくれるとなお嬉しい感じ
2の挙動は初期状態が表示件数ゼロで項目を足していく時に使うのが自然に感じる
132(6): 2023/09/14(木)13:06 ID:aPP30ZSe(1) AAS
tableの作り方で質問です。
こんなテーブルを作ろうと思っています。
a: colspan=2
b: colspan=2
c: colspan=4
d: 指定不要
e: colspan=2
f: 指定不要
とすればよいと思うのですが、
テーブル全体の幅やeとfの中身のテキスト量にかかわらず
省8
133: 2023/09/14(木)13:48 ID:??? AAS
dが固定ならefはcalc使えばよさそうだけど
tableだとダメとかあるんかな
134: 2023/09/14(木)14:04 ID:??? AAS
>>132
<col>を用意してそれにwidthを指定したらよいのでは
135(1): 132 2023/09/14(木)15:05 ID:??? AAS
colタグの存在を初めて知りました。
calcを用いた指定と合わせて試してみたのですが、やり方や考え方が間違っているんでしょうか…
外部ﾘﾝｸ:codepen.io
136(2): 2023/09/14(木)16:40 ID:??? AAS
grid使うとか他にもっと良い方法があるのかもしれないけど、とりあえずtable使うということで
・tableの最上段にダミーでtr1行追加
・更にbと同一幅のセルを左から4番目に追加
・最上段だけvisibility: collapse;で不可視化（hiddenだとレイアウトからも除去されるので）
ってのはどうでしょう？
外部ﾘﾝｸ:jsfiddle.net
137(1): 2023/09/15(金)01:14 ID:??? AAS
Bootstrap で出来ないの？
138: 2023/09/15(金)04:02 ID:9yhdlK5+(1) AAS
列数を増やしてしまえ
139: 2023/09/15(金)04:07 ID:??? AAS
あとは行にtable追加するとか
昔はよくやってたけど今はもっと便利な方法があるのかな
140: 2023/09/15(金)04:58 ID:??? AAS
みんな>>132の説明でどんなテーブルかわかるん？
俺全然わかんねえや…
141(1): 2023/09/15(金)08:31 ID:??? AAS
一番下のお絵かきの画像
142(1): 132 2023/09/15(金)16:21 ID:??? AAS
>>136さんと138さんの方法で出来ました！
大変助かりました、ありがとうのざいます。
gridはよくわからなかったので勉強してみます。
>>137
まさにbootstrap使ってるんですが、gridレイアウトを使ったらどうかということでしたかね？
143(1): 2023/09/15(金)16:24 ID:??? AAS
なぜgridはflexに負けたのですか？
144: 2023/09/15(金)17:02 ID:??? AAS
>>141
あー、分かる人にはなんか表示されてるのか
納得
145: 2023/09/15(金)17:06 ID:??? AAS
>>143
別に勝ち負けないじゃん？
flexの出始めと一緒で、使えるようになった人から使っていく流れっしょ
146: 2023/09/15(金)17:33 ID:??? AAS
というか今でもflex使うけど
単に横一列縦一列に並べるなら絶対flexのが早いし
147(1): 2023/09/15(金)18:45 ID:??? AAS
>>142
>>135のcodepen見て>>136作ったけど、>>132の画像ちゃんと見てなかったから一応修正
外部ﾘﾝｸ:jsfiddle.net
結局のところtable-layout: fixedの場合は
table-layout - CSS: カスケーディングスタイルシート | MDN
外部ﾘﾝｸ:developer.mozilla.org
> 表と列の幅は table 要素と col 要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列の幅に影響しません。
ってことなので、先頭行がcolspanで結合してる場合には後続のセル幅のコントロールが少し面倒
colタグ使ってもセルが結合してると難しいね
省2
148(2): 2023/09/15(金)21:31 ID:??? AAS
<div id="hoge">
<ul>
<li>文１</li>
<li>文２</li>
<li>文３</li>
</ul>
</div>
#hoge > ul li {
・・・
}
省5
149: 2023/09/15(金)22:26 ID:??? AAS
今となってはflexとgridなしは考えられないな
昔はflexなしでTableレイアウトをcssで再現してたけど無理があったよね
上下前次1-新書関写板覧索設栞歴
あと 832 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 1.403s*