並べたテーブルの行の高さを合わせたい

Question

環境
11/8時点で最新のgoogle Chromeを使用しています。
Windowsマシンのモニタサイズによって表示が崩れることで困っています。

崩れる内容
テーブルを左右横並べにし、左側のtrの高さを40、右側のtrの高さを20にし、
左のtrと、右のtr２つ分の下の線が揃うようにしたいのですがずれてしまいます。
15インチではほぼずれず、12インチではずれますが、表示を90%にするとずれなくなります。

教わりたいこと
ずれる原因と、対処方法を知りたいです。
また、指定した高さより微妙に大きくサイズが確保されていたりするので、こちらも何故そうなるか教えていただけると嬉しいです。

簡単に書いてしまいましたが、よろしくお願い致します。

Comments

[teikoku-penguin]

HTMLとCSSのソースコードを貼ると解答を得やすいと思います

[colomiyu]

ご回答ありがとうございます。そうですよね。今携帯からで対応できないのですが、後ほど検討します。JSPのような埋め込みコードがあるので、クロームの開発機能のHTML表記を出してみます。

[yoshinavi]

セルの高さとフォントの大きさはどうですか？ line-heightの設定は？ ブラウザは「デフォルトスタイル」を持っていますので、ある程度の「リセット」は必要になるかと思います。

[colomiyu]

返信遅くなり、大変失礼いたしました。
フォントは11.808px,(90%に指定しています）、line-style=noneに設定しています。
tdの高さは39pxですが、その内側のdivの高さは40.5pxとなっています。

Answer 1

<table>はセルとセルの間に隙間がありますので、そこの設定がデフォルトのままではないでしょうか？
border-collapse: collapse;で隙間をゼロにして、線が重なって見えるようになると、高さが揃うかと思います。

---追記---
CSSに書く場合は

table {
  border-collapse: collapse;
}

HTMLタグに直接書く場合は

<table cellspacing="0">

です。

---

症状的にはたぶんこちらです

他には、高さ20ぐらいだと、中に入っている文字がセルを押し広げてしまっている可能性があります。
（表示を90%にするとずれなくなるということですので、こちらの可能性の方が高いかな、、、）

font-sizeを下げるか、<tr>の高さをあげてください。paddingの上下を0pxにしてみても良いかも。

Comments

[colomiyu]

ご回答ありがとうございます！返信遅くなり申し訳ありません。
<table border="0" cellpadding="0" cellspacing="0">となっています。
データのまとまりの単位の1行の構成は、
左のテーブルは2行を連結、真ん中のテーブルは2行、左のテーブルは2行となっています。
左のテーブルの情報が一番多いので再度調整してみます。
ありがとうございます。

Answer 2

左右の行数が一緒なら一つのテーブルしにしてはどうでしょうか？

<style>
#t1{border-collapse:collapse;}
#t1 td,#t1 th{border:solid 1px #000000;}
#t1 .noborder{border:solid 0px;width:20px;}
</style>
<table id="t1">
<thead>
<tr>
<th>left1</th>
<th>left2</th>
<th class="noborder"></th>
<th>right1</th>
<th>right2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td class="noborder"></td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5<br>5<br>5</td>
<td>6</td>
<td class="noborder"></td>
<td>7<br>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td class="noborder"></td>
<td>11<br>11</td>
<td>12</td>
</tr>
</tbody>
</table>

Comments

[colomiyu]

ご回答ありがとうございます！返信遅くなり申し訳ありません。
3つのテーブルはそれぞれデータを取得しており、動的に生成しているため自力での修正が難しいです。
もう少し勉強して、検討します。