![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
CGIの表示部分を改造中です。
下のソースをhtmlファイルにして見てもらったら判ると思うのですが、
<TABLE border="0">
<COL span="4" width="50">
<TR>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">こんな風に</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">枠を置いたときに</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
高さを100%にしても広がりませんでした。
どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?
No.3ベストアンサー
- 回答日時:
こんにちは
一番上の<table>にheight指定してやってください(^^)
<TABLE border="0" height="100">
<COL span="4" width="50">
<TR>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">こんな風に</TD>
以下続く・・・
No.5
- 回答日時:
一番外側のテーブルに高さ指定をしないと、何に対しての100%かがあいまいになるので揃わないのではないでしょうか。
<TABLE border="2" height="25%">
<COL span="4" width="50">
<TR>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">こんな風に</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">枠を置いたときに</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD>
</TR>
</TABLE>
</TD>
<TD valign="top">
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%">
<TR>
<TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
外側のボーダーは分かりやすくちと太く表示しときました。
No.4
- 回答日時:
#1 naokitaです(補足への返信)
それならセル枠のborderだけ設定し隙間を開ける。
枠とのスペースだけの為に莫大なtable設定をするよりも、簡潔にtableは1つに統一。
(背景が白の場合は下記の background: #fff は不要)
-----------------------------------------
<table cellpadding="0" cellspacing="4">
<tr valign="top">
<td style="width: 48px; border: 1px solid #ccc; background: #fff">こんな風に</td>
<td style="width: 48px; border: 1px solid #ccc; background: #fff">枠を置いたときに</td>
<td style="width: 48px; border: 1px solid #ccc; background: #fff">100%のサイズ指定しても合わない高さを</td>
<td style="width: 48px; border: 1px solid #ccc; background: #fff">ちゃんと揃えて配置したい</td>
</tr>
</table>
------------------------------------------
CSSでtd指定もしくはクラス指定するともっと短縮。
td {
width: 48px; border: 1px solid #ccc; background: #fff }
No.1
- 回答日時:
単純にこんな感じですか?(意味が違ったら申し訳ない)
<TABLE cellpadding="1" cellspacing="1" bgcolor="#cccccc">
<TR bgcolor="#ffffff" valign="top">
<TD width="50">こんな風に</TD>
<TD width="50">枠を置いたときに</TD>
<TD width="50">100%のサイズ指定しても合わない高さを</TD>
<TD width="50">ちゃんと揃えて配置したい</TD>
</TR>
</TABLE>
この回答への補足
すみません。ちょっと意味が違います。
テーブルの中にさらにテーブルを入れる必要があります。
その内側のテーブルの高さを指定したいです。
テーブルの中にテーブルとした理由は、枠と枠の間の空白が必要だったからです。
他の方法があればお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
テーブルの行の高さを指定する時全てのtdタグに?
HTML・CSS
-
<table>の高さ固定。情報増加時、高さ自動変化
HTML・CSS
-
テーブル内の文字サイズを変更したい。
HTML・CSS
-
-
4
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
5
テーブルで3セル作った行の下に2セルを均等な幅で作るには?
HTML・CSS
-
6
table表を横に並べる際の間隔指定
ホームページ作成・プログラミング
-
7
テーブルセル余白(例えば左側だけ、上側だけ、など)
HTML・CSS
-
8
Safariでテーブルのセルの高さを均等にしたい
HTML・CSS
-
9
全てのselect要素をデフォルトの値に戻す方法
JavaScript
-
10
tableのheight指定が効かない
HTML・CSS
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
Tableタグで作成した表の縮小
-
IEでテーブル内のテキストが...
-
Firefoxを使ってるのですがズー...
-
スタイルシートでpaddingを使う...
-
テーブルの一部分のセルだけに...
-
Visual Studio で CLR 開発でデ...
-
<img>の右横に<table>を配置したい
-
firefoxで「height: 100%;」と...
-
セルの高さを固定するには?
-
td width="180" と固定してるの...
-
<img>タグにCSSのclass設定可能?
-
HPビルダー10で、ロゴ、写真...
-
htmlで画像の上にテキストを表...
-
同じクラス名はつけないほうが...
-
TDタグ内での均等割付の仕方
-
HTMLのテーブルでそれぞれの大...
-
<TD div id="new">←こういうの...
-
cssでコンテンツと背景の間に影...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
テーブル内のテーブルの高さを...
-
cssで、テーブルのtdの中の文字...
-
XHTMLに関する質問 順序が逆に...
-
vbscriptで時計を作りたい
-
Tableタグで作成した表の縮小
-
Tableタグ内のspan styleが適応...
-
formのinputなどの幅100%指定
-
Firefoxを使ってるのですがズー...
-
divで囲んだ文字が消える
-
商品詳細を横並びに表示する方法
-
表とリスト(ulとtable)の違い...
-
入れ子にしたテーブルをheight1...
-
TDタグ内での均等割付の仕方
-
テーブルのセル内の隙間を取れ...
-
td要素内のdiv要素をセンタリン...
-
HTMLのテーブルでそれぞれの大...
おすすめ情報