いくらやっても作成したテーブルを挿入するととの画像やメニューと干渉してレイアウトが崩れてしまいます。テーブルを取るとレイアウトが戻ります。。。
文字量の関係でテーブルだけ記入しました。
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
/*テーブル*/
table {position:absolute; left:200px; top:450px;
font-family:MS,UI,Gothic,標準;
FONT-SIZE: 11px;
COLOR: #666666;
font-weight: lighter;
text-align:center;
border-collapse:collapse
}
caption {
font-family:MS,UI,Gothic,標準;
FONT-SIZE: 11px;
COLOR: #666666;
font-weight: lighter;
text-align:left;
}
table,th,td {border:1px solid}
div {margin:20px}
-->
</style>
</head>
<body>
<div>
<table>
<caption>ジャズシューズサイズ表</caption>
<tr><th width=70px>Sansha</th><td width=30px>2</td><td width=30px>3</td><td width=30px>4</td><td width=30px>5</td><td width=30px>6</td>
<td width=30px>7</td><td width=30px>8</td><td width=30px>9</td><td width=30px>10</td><td width=30px>11</td>
<td width=30px>12</td><td width=30px>13</td><td width=30px>14</td><td width=30px>15</td>
</tr>
<tr><th>(cm)</th><td>21</td><td>21.5</td><td>22</td><td>22.5</td><td>23</td><td>23.5</td><td>24</td>
<td>24.5</td><td>25</td><td>25.5</td><td>26</td><td>26.5</td><td>27</td><td>27.5</td>
</tr>
</table>
</div>
</body>
No.2ベストアンサー
- 回答日時:
空いている右下(left:200px top:450px)にテーブルをおきたくて、そのように書いてあるのに、他と重なってしまうっていう状況が今ひとつわからないのですが、ポジションで指定した位置に表示されないってことなんでしょうか?
少なくとも、質問文のHTMLだけだと、ちゃんと指定した位置(left:200px; top:450px;)に表示されているので、どういった状況なのかもう少し詳しくわからないと、皆さん答えようがないと思いますよ。
たとえば、テーブル挿入前はいいけど、テーブルを挿入するとレイアウトが崩れるというのも、挿入したテーブルがメニューや画像とかぶってしまうのか、他のもの全てがあらぬレイアウトになってしまうのか。とか、単純にleft:200px top:450pxの位置に入らないだけなのかとか、他の要素の位置指定もスタイルシートで行っているのかとか。
もしも、すべてのものをポジションでコントロールしているのなら、スタイルシートだけでもココに乗せてもらえれば、解決の糸口は見つかるかもしれませんね。(その際には、それぞれのものの縦横のサイズもわかったほうがいいと思いますが)
とにかく、何かしら情報がもう少しわかればといった感じでしょうか。
この回答への補足
お返事遅くなりまして申し訳ありません。ご丁寧にありがとうございます。文字数オーバーでかけなかったのですが例えば下記CSS(一部)と組み合わせるとあらぬレイアウトになってしまいます。全てのものをスタイルシートでコントロールしているからなのかクラスの設定が違うのか??という状況です。
<HTML>
<style type="text/css">
<!--
.title{
position:absolute;
left:152px;
top:28px;
width:700px;
}
.title div{
float:left
}
.title a {
background-COLOR:#969696;
display:block;
width:90px;
border:none;
padding:4px;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
font-size:10px;
COLOR: #ffffff;
FONT-FAMILY: MS,UI,Gothic,標準;
}
.title A:hover {
background-COLOR:#000000;
COLOR:#ffffff;
}
-->
</style>
<div class="title">
<DIV>
<A href="page11.htm">HOME</A>
</DIV>
<DIV>
<A href="page02.htm">WHAT'S SASHA</A>
</DIV>
<DIV>
<A href="page03.htm">ABOUT US</A>
</DIV>
<DIV>
<A href="page04.htm">CONTACT</A>
</DIV>
<DIV>
<A href="page05.htm">ご利用方法</A>
</DIV>
</DIV>
</BODY>
</HTML>
No.3
- 回答日時:
すべてがわからないのと、私の力量不足も手伝って、なかなか原因となりそうなのはわかりませんが、とりあえず、ココにあるだけの情報でいくと、
質問文の中にある
div {margin:20px}
のせいで、全体的にレイアウトおかしくなってるのはあると思いますが、さすがにこれはここへの書き込みの都合でって感じでしょうね。
あと、私が思いつくのはpositionの“親子”関係的なものでしょうか。
親にあたるものに、static以外で位置指定がされていると、位置指定の基点が、ページの左上じゃなくなるのでそのせいで、指定した位置どおりに表示されなくなってたりってこともあるのかなぁって事くらいですね。
たとえば、
<html>
<head>
<style type="text/css">
<!--
.ichi { position:absolute;left:100px;top:100px;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div class="ichi">
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<div align="center">親</div>
</td>
</tr>
</table>
<div class="ichi">
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<div align="center">子</div>
</td>
</tr>
</table>
</div>
</div>
<div class="ichi">
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<div align="center"><font color="#99CC66">重なって見難いけど…</font></div>
</td>
</tr>
</table>
</div>
</body>
</html>
こんな感じで、3つのテーブルには同じスタイルシートを適用しているけど、親テーブルのdivタグ内にある子テーブルは親テーブルの左上から右に100px、下に100pxの位置に表示され、もう一つのテーブルは重なって見難いですが、親テーブルと同じ位置に表示されています。
これのせいで、追加したテーブルだけが何かの外にあるor何かの中に入ってしまっているせいで、位置がおかしくなってしまっているのかもしれませんね。
あまり的を射てなさげな回答でスイマセン。
どっちか、もしくは両方で何とかなるといいですが。
また何かありましたら、わかる範囲でお手伝いできればと思います。
No.1
- 回答日時:
>table {position:absolute; left:200px; top:450px;
ここで、テーブルを左から200ピクセル、上から450ピクセルの位置に表示するように指定していますが、これは必要な指定でしょうか?
この位置指定がほかの画像などとテーブルが重なってしまう要因ではないかと思います。
position:absolute; left:200px; top:450px; を削除してみてください。
この回答への補足
ありがとうございます。しかしながら
削除しましたが、定位置の左上に表示され
CSSで作成したメニューバーやタイトル
が崩れてしまいました。
レイアウト的にテーブルを入れる場所が空い
ているのが右下なのでleft:200px; top:450px;
の座標に置きたいのです。。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- 工学 【制御工学】単位ステップ応答の遅れ時間の求め方(令和2年度の機械設計技術者試験(制御工学)の問題) 3 2022/11/02 10:51
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
テーブルのヘッダとボディの幅...
-
表の1列だけをCSSを使って右揃...
-
文字列が入っているtdを削除せ...
-
テーブルの入れ子について
-
テーブルのレイアウトがおかし...
-
CSSだけで<table>の<td>や<tr>...
-
tableにul,または,olを入れられ...
-
テーブルタグのセルの幅の一部...
-
tableの要素(tr、td)に一...
-
データバインドでCSVファイルの...
-
safariで特定条件下でデーブル...
-
テーブルのひとつの項目を見え...
-
TABLE内でのwidth指定
-
表の一部を結合するには?
-
html・cssで日付をキレイに揃え...
-
テーブルの任意の列を非表示に...
-
ホームページ 表の上の余白を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行の高さを指定する...
-
ホームページ 表の上の余白を...
-
テーブルの表示がずれます
-
テーブルのセルにアンカー
-
テーブルタグのセルの幅の一部...
-
逆L字の表(table)組み
-
中に<table></table>が使えるア...
-
tableでcolspanを使うと次行以...
-
スタイルシートで colspan=3と...
-
TABLE内の枠線を一部消すには
-
テーブルの上に空行が入る・・...
おすすめ情報