ど素人から毛を生やす。<延>

tableのwidthを定めても、中の要素に押し広げられてしまう件

Web > css 2018年1月19日(最終更新:5年前)

2018年1月19日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

どもです。

テーブル要素を使うとき、多くはcolgroupを使用して、セル幅を指定します。

例:


<table>
	<colgroup>
		<col width="60px">
		<col width="60px">
		<col width="60px">
	</colgroup>
	<tbody>
		<tr>
			<td>AAA</td>
			<td>BBB</td>
			<td>CCC</td>
		</tr>
	</tbody>
</table>

AAA BBB CCC

ただ、中の要素にサイズが指定されていたり、select->optionなどの横にしか伸びない要素を入れると…

もう!ママちゃんと60pxに収まりなさいって言ってるじゃない!

この場合は、中の要素を直接サイズ指定しなければダメです。


<table>
	<colgroup>
		<col width="60px">
		<col width="60px">
		<col width="60px">
	</colgroup>
	<tbody>
		<tr>
			<td><img src="画像.png" style="width:50px"></td>
			<td><input type="text" style="width:50px"></td>
			<td>
				<select style="width:50px">
					<option>お庭にわの垣根かきねのところには、...</option>
				</select>
			</td>
		</tr>
	</tbody>
</table>

ちなみに、inheritはtdに幅が指定されていないと効かない。不便。


<td>
	<select style="width:inherit;">
		<option>これはcol設定されててもNG</option>
	</select>
</td>
<td style="width:50px;">
	<select style="width:inherit;">
		<option>これはOK</option>
	</select>
</td>
この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)