【HTML5】divとtdの違いについて

HTMLについて質問です。
バージョンはHTML5を使用しています。

cssでwidthを%で指定しているのですが、下記のような違いがあります。

・div
⇒小数点まで計算される

・table要素のthやtd
⇒小数点が切り捨てられる

この差異をなくすためにはcssやHTMLでどのような記述の方法がありますでしょうか？

ブラウザはGoogle Chromeです。

<!DOCTYPE html>
<html>

<head>
	<title>台帳レイアウト　作成中</title>
	<meta charset="UTF-8">

	<style>
		section {
			padding-bottom: 20px;
		}

		.width-33 {
			width: 33%;
		}

		.width-77 {
			width: 67%;
		}

		table {
			display: table;
			border-collapse: collapse;
			border-spacing: 0;
			border-color: #A9A9A9;
			margin-top: 0;
			margin-bottom: 0;
			width: 100%;
		}

		th {
			border: 1px solid black;
		}

		.div-parent {
			display: flex;
		}

		.div-parent>div:nth-of-type(1) {
			border: 1px solid black;
			border-right: none;
		}

		.div-parent>div:nth-of-type(2) {
			border: 1px solid black;
		}
	</style>
</head>

<body>
	<section>
		<table>
			<thead>
				<tr>
					<th class="width-33">1</th>
					<th class="width-77">2</th>
				</tr>
			</thead>
		</table>
	</section>

	<section>
		<div class="div-parent">
			<div class="width-33">1</div>
			<div class="width-77">2</div>
		</div>
	</section>
</body>

</html>

T_sa

2017/11/28 08:08

閲覧環境や記述によっても異なりますので確認している環境、具体的に再現できるコードなどご提示ください

退会済みユーザー

2017/11/28 08:16

ブラウザはChromeで見ています。提示できるコードを探していますので少々お待ちくださいませ。

行動規範の内容に同意します

回答2件

ベストアンサー

CSS の定義上は、 % がつくものは前が実数（<number>）であることが明示されています。

ですが、それをレンダリングする際に切り捨てたり四捨五入したりすることもまた、別に違反ではありません。あるブラウザで div には利くが th には利かない、とすれば、それはそういう実装である、というだけのことであって、本質的にはどうしようもないことです。
どうしてもというなら、th/td では width を指定せず、その中にさらに div を入れて強引に幅指定する方法もなくはないでしょうが……

こんな考察をされたページもありますね。

投稿2017/11/28 08:53