質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.63%

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

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,450

colomiyu

score 11

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • teikoku-penguin

    2018/11/08 13:43

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

    キャンセル

  • colomiyu

    2018/11/08 13:54

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

    キャンセル

  • yoshinavi

    2018/11/09 21:44

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

    キャンセル

  • colomiyu

    2019/01/23 14:15

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

    キャンセル

回答 2

0

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

<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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/23 14:22

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

    キャンセル

0

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

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

table {
  border-collapse: collapse;
}


HTMLタグに直接書く場合は

<table cellspacing="0">


です。


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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/23 14:21

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る