※ ChatGPTを利用し、要約された質問です(原文:2つのテーブルの幅を一致させたい)
2つのテーブルの幅を一致させたい
このQ&Aのポイント
以下のHTMLで、2つのテーブルのセル幅が一致しません。JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・
jqueryを使用して、2つのテーブルのセル幅を一致させる方法について教えてください。
HTMLのテーブルにおいて、ヘッダとボディのセル幅を一致させる方法を教えてください。
以下のHTMLで、2つのテーブルのセル幅が一致しません。
JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。
ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・
JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。
jqueryを使用しています。
<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
headerTableWidthFit();
});
$( window ).resize(function(){
headerTableWidthFit();
});
function headerTableWidthFit() {
var i = 0;
$('#resultBodyTable table tbody tr:eq(0) td').each(function() {
$('#resultHeaderTable table th').eq(i).width($(this).width());
i++;
});
}
</script>
</head>
<body>
<div id="container">
<div id="resultHeaderTable" class="headerTable">
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>あ</th>
<th>い</th>
<th>う</th>
<th>え</th>
<th>お</th>
<th>か</th>
<th>き</th>
<th>く</th>
</tr>
</thead>
</table>
</div>
<div id="resultBodyTable" class="bodyTable">
<table border="1" cellspacing="0" cellpadding="0" width="100%">
<thead>
</thead>
<tbody>
<tr>
<td>あaaaaaa</td>
<td>い</td>
<td>う</td>
<td>え</td>
<td>お</td>
<td>か</td>
<td>き</td>
<td>く</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
お礼
2つに分けている理由としては ボディ部分にスクロールバーをつけたいと考えています。 なおかつ、widthを%を設定し可変にしています。 やはり可能であればcssで処理したいので 見ていただいた方には申し訳ないのですが html板でもう一度同じような質問をさせていただきたいと思います。 ありがとうございました。