HTML テーブルのwidth設定

Question

解決したい内容

テーブルのwidth設定が上手くいかない。

〇テーブルクラスの「t1」が左、「t2」が右
×「t1-1」「t1-2」「t2-1」「t2-2」の設定が画面内widthに合わせて大きくならない
→5% 45% 5% 45%という形で並んでほしい。
日程のサイズは固定できるので出来るだけ最小に固定し、イベントのスペースを広げたい。

<table class="t1">
<tr><th class="t1-1">3年生</th><th class="t1-2">イベント</th></tr>
<tr><td class="t1-1">4月1週</td><td class="t1-2">新学期開始</td></tr>
<tr><td class="t1-1">4月2週</td><td class="t1-2"></td></tr>
<tr><td class="t1-1">4月3週</td><td class="t1-2"></td></tr>
<tr><td class="t1-1">4月4週</td><td class="t1-2"></td></tr>
<tr><td class="t1-1">5月1週</td><td class="t1-2"></td></tr>
<tr><td class="t1-1">5月2週</td><td class="t1-2">GW</td></tr>

<table class="t2">
<tr><th class="t2-1">4年生</th><th class="t2-2">イベント</th></tr>
<tr><td class="t2-1">4月1週</td><td class="t2-2">新学期</td></tr>
<tr><td class="t2-1">4月2週</td><td class="t2-2"></td></tr>
<tr><td class="t2-1">4月3週</td><td class="t2-2"></td></tr>
<tr><td class="t2-1">4月4週</td><td class="t2-2"></td></tr>
<tr><td class="t2-1">5月1週</td><td class="t2-2"></td></tr>
<tr><td class="t2-1">5月2週</td><td class="t2-2">GW</td></tr>

/*テーブル*/
table {border-collapse: collapse; table-layout: fixed;}
th, td {border: solid; padding: 0.5em;}
.t1 {float: left;}
.t1:after {content: ""; display: block; clear: both;}
.t1-1, .t2-1 {max-width: 5%;}
.t1-2, .t2-2 {max-width: 45%;}

タブのコード

<div class="tab_wrap">
    <div class="tab_area">
		<label class="tab_label active" for="tab1">1大学</label>
		<label class="tab_label" for="tab2">2大学</label>
		<label class="tab_label" for="tab3">3大学</label>
	</div>
	<div class="panel_area">
		<div id="panel1" class="tab_panel active">
                    <table class="t1">
                        <tr><th class="t1-1">3年生</th><th class="t1-2">イベント</th></tr>
                        <tr><td class="t1-1">4月1週</td><td class="t1-2">新学期開始</td></tr>

タブが無ければ解決策

main{display:flex;}
table {border-collapse: collapse; flex:1;}
th, td {border: solid; padding: 0.5em;}
.t1-1, .t2-1 {width: 5%;}
.t1-2, .t2-2 {width: 45%;}

他のサイトで教えて頂きました。
bodyの中にmainを追加してこちらのcssで希望通りの構成になりました。

注：こちらには記載していませんが作成しているタブ有りの状態で同じ結果になりませんでしたので、いろいろ試してみたいと思います。わからない場合はまた更新すると思います。

環境

windows10
VScode

Comments

[m.ts10806]

タブ部分のhtml,cssもご提示ください

Answer 1

テーブルをfloatする意味があるのかちょっと微妙です
幅を指定するのはcolを設定した方がよさそう

<style>
table {border-collapse: collapse; table-layout: fixed;}
th, td {border: solid; padding: 0.5em;}
.t1 {float: left;}
.t1,.t2{width:50%;}
.t1-1,.t2-1{width: 10%;}
.t1-2,.t2-2{width: 90%;}
</style>
<table class="t1">
<colgroup>
<col class="t1-1">
<col class="t1-2">
</colgroup>
<tr><th>3年生</th><th>イベント</th></tr>
<tr><td>4月1週</td><td>新学期開始</td></tr>
<tr><td>4月2週</td><td></td></tr>
<tr><td>4月3週</td><td></td></tr>
<tr><td>4月4週</td><td></td></tr>
<tr><td>5月1週</td><td></td></tr>
<tr><td>5月2週</td><td>GW</td></tr>
</table>

<table class="t2">
<colgroup>
<col class="t2-1">
<col class="t2-2">
</colgroup>
<tr><th>4年生</th><th>イベント</th></tr>
<tr><td>4月1週</td><td>新学期</td></tr>
<tr><td>4月2週</td><td></td></tr>
<tr><td>4月3週</td><td></td></tr>
<tr><td>4月4週</td><td></td></tr>
<tr><td>5月1週</td><td></td></tr>
<tr><td>5月2週</td><tda>GW</td></tr>
</table>

Comments

[LBciel.]

ご回答有難う御座います！無事解決致しました！
一括class指定のような事が出来るものはないかと探しておりました・・・colというものがあったのですね。勉強になりました！

>テーブルをfloatする意味があるのかちょっと微妙です
私自身浅学で知っている事だけで作成しておりましたので、yambejp様の回答の様に知らない内容を知れることを非常に嬉しく存じます。floatはどの様な場合に使うべきかも調べなければなりませんね。

Answer 2

上記のHTMLコードで作るならcssのtableにwidth:50%を追加すれば良いと思います。
ただレスポンシブ対応したいのなら

table {width: 50%; border-collapse: collapse; table-layout: fixed;}
th, td {border: solid; padding: 0.5em;}
.t1 {float: left;}
.t1:after {content: ""; display: block; clear: both;}
.t1-1, .t2-1 {width: 75px;}
.t1-2, .t2-2 {width: 100%;}

上記の書き方の方がよいと思います。

Comments

[LBciel.]

ご回答有難う御座います！

>上記のHTMLコードで作るならcssのtableにwidth:50%を追加すれば良いと思います。
こちらを試してみたところ、25%25%25%25%という結果でした。