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

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

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

どもです。

テーブル要素を使うとき、多くは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)