![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
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も見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
<table>の高さ固定。情報増加時、高さ自動変化
HTML・CSS
-
テーブルの行の高さを指定する時全てのtdタグに?
HTML・CSS
-
テーブル内の文字サイズを変更したい。
HTML・CSS
-
-
4
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
5
テーブルで3セル作った行の下に2セルを均等な幅で作るには?
HTML・CSS
-
6
table表を横に並べる際の間隔指定
ホームページ作成・プログラミング
-
7
エクセルのセル内の余白の設定って出来るのでしょうか?
Excel(エクセル)
-
8
テーブルセル余白(例えば左側だけ、上側だけ、など)
HTML・CSS
-
9
Safariでテーブルのセルの高さを均等にしたい
HTML・CSS
-
10
tableのheight指定が効かない
HTML・CSS
-
11
全てのselect要素をデフォルトの値に戻す方法
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
テキストの回りこみについて
-
テーブルの一部分のセルだけに...
-
html でのテキスト結合について
-
Tableタグ内のspan styleが適応...
-
vbscriptで時計を作りたい
-
htmlのボタンを左寄席にしたい
-
style=displayでの表示/非表示...
-
同じクラス名はつけないほうが...
-
ブラウザによってテーブルのセ...
-
divで囲んだ文字が消える
-
【タグ】左寄せする方法
-
商品詳細を横並びに表示する方法
-
ie9でimgの高さがheight属性と...
-
添付のような形で10×10ピクセル...
-
td要素内のdiv要素をセンタリン...
-
ページ内のあらゆるオブジェク...
-
セルの高さを固定するには?
-
表とリスト(ulとtable)の違い...
-
テーブルタグの中にdivを含めて...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
formのinputなどの幅100%指定
-
divで囲んだ文字が消える
-
td要素内のdiv要素をセンタリン...
-
XHTMLに関する質問 順序が逆に...
-
テーブル内のテーブルの高さを...
-
td width="180" と固定してるの...
-
Tableタグで作成した表の縮小
-
Tableタグ内のspan styleが適応...
-
cssで、テーブルのtdの中の文字...
-
table内の画像を中央寄せ、のせ...
-
<img>タグにCSSのclass設定可能?
-
Firefoxを使ってるのですがズー...
-
trとtrの間
-
表とリスト(ulとtable)の違い...
-
同じwidth=200でもセル内の文字...
-
HTMLのテーブルでそれぞれの大...
おすすめ情報