『L・DK』上白石萌音&杉野遥亮インタビュー!

HTMLタグでWEBサイトを作成していますが、テーブルの幅を指定しても実際ページを開けると、同じ数値入れても同じ幅にならなかったり、全ての幅指定してもその通りになりません。またウィンドウを大きくしたり小さくしたりすると、特定の列のみ幅が狭くなったり広くなったりします。どうすれば幅を指定した数値どおりに固定できますでしょうか。

A 回答 (3件)

 style="table-layout: fixed;" で、指定すると良いようです。



<html><head>
</head>
<body>
<table border=1 style="table-layout: fixed;">
<tr height="50">
<td width="160" colspan="2">あああああああああああああああああああああああああ</td>
<td width="80">いいいいいいいいいいいいいいいいいいいいいいいいい</td>
<td width="160">ううううううううううううううううううううううううう</td>
</tr>
<tr height="50">
<td width="80">かかかかかかかかかかかかかかかかかかかかかかかかか</td>
<td width="80">ききききききききききききききききききききききききき</td>
<td>くくくくくくくくくくくくくくくくくくくくくくくくくくくくくく</td>
<td>けけけけけけけけけけ</td>
</tr>
</table>
</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございました。上手くいきました。このタグは知りませんでした。勉強になりました。

お礼日時:2005/10/16 11:32

style=""table-layout: fixed;""


を付けることで解決すると思います。

参考URL:
http://www.htmq.com/style/table-layout.shtml
    • good
    • 1

専門家紹介

山本慎太郎

職業:ITコンサルタント

20年間のweb制作の経験を活かし、コンサルティングを行っています。
特にGoogle AnalyticsやGoogle Adwordsを得意とし、主に中小企業のサイトの改善を行っています。

Google Anaylytics認定資格者
Google AdWords認定資格者

詳しくはこちら

専門家

・table の width


・横一列分の全 td の width
両者ともピクセル値で統一して指定して下さい。
指定抜けや%指定が混在するとその部分で伸張が発生します。

[ex]

<table width="600">
<tr>
 <td colspan="2">...</td>
 <td width="150">...</td>
 <td width="150">...</td>
</tr>
<tr>
 <td width="150">...</td>
 <td width="150">...</td>
 <td>...</td>
 <td>...</td>
</tr>
</table>

など
    • good
    • 0
この回答へのお礼

ありがとうございました。今までは列のみピクセル値で指定していましたが、テーブル全体は指定していませんでした。これで解決しました。

お礼日時:2005/10/16 11:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qテーブル幅が固定できない

cssに「table-layout: fixed;」を記載してテーブルの幅が固定になるように設定しています。
設定していますが、ブラウザの幅を狭めると

テスト1|テスト2|テスト3

と表示されていたものが

テスト1
テスト2
テスト3

と、レイアウトが崩れてしまいます。
<table>、<tr>、<td>タグにつけてみましたが、全て崩れてしまいます。
幅や高さ等も指定していますが、何かが足りないのでしょうか。

Aベストアンサー

table-layout:fixed;と一緒にwidthを指定されましたか?
両方設定しないと固定されません。

Qcolspanを使うと正しく表示できない?!

あるwebシステムで
現在の予約数を表示するようなhtmlを作成しています。

tableを使って、td内に予約できる数をcolspanで指定して、
現在の予約状況がひとめでわかるように表示しているのですが
なぜか、正しく表示できなくなってしまいました。
ブラウザもie6からie8にはなったのですが。

いろいろ検索してみると、似たような質問はたくさんされていましたし、
それぞれにwidth指定もすればよい・・・のように記載されていて解決されているようでした。
でも、同じように試してみましたがダメでした。(表示結果は同じ)


サンプルとしまして、(全体で92がMAXの予約数として です)

<table width="319" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="25" colspan="2" align="center">日時</td>
<td width="100" colspan="50" align=right>50</td>
<td width="84" colspan="42" align=right>92</td>
<td width="35" height="25" align="center" bgcolor="#ffd37d">空き</td>
</tr>

<tr>
<td rowspan="12" width="55" align=center valign=top>11月26日</td>
<td width="45" align=center>0時</td>
<td width="110" colspan="55" bgcolor="#ff4500" align="center">55</td>
<td width="74" colspan="37" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>37</font></td>
</tr>

<tr>
<td width="45" align=center>1時</td>
<td colspan="55" bgcolor="#ff4500"align="center">55</td>
<td colspan="37" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>37</font></td>
</tr>

<tr>
<td width="45" align=center>2時</td>
<td colspan="55" bgcolor="#ff4500" align="center">55</td>
<td colspan="37" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>37</font></td>
</tr>

<tr>
<td width="45" align=center>3時</td>
<td colspan="70" bgcolor="#ff4500" align="center">70</td>
<td colspan="22" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>22</font></td>
</tr>

 ・
 ・
 ・

のような場合、<tr>内の2つめの<td>のcolspan=70も55も同じ幅で表示されます。
違う・・・といえば、align=centerでそれぞれ数字を表示させていますが
55のテキストが少し左寄り、70がcenterに表示されてるように見えます。
また、赤背景色の幅も微妙に0.xミリくらいは colspan=70の方が広いです。

tableのwidthがborderの幅を考慮していないのですが
これも問題でしょうか?

みなさん、似たような問題がでても解決されているようなのですが
自分の場合、どうやってもなかなか解決できません。

tableの幅を広めに取ったり、style指定したり、widthを入れたり・・・

因みに依然(今年の春頃まで?)は、width無しのcolspan指定だけで、
思い通りに表示できていました。
その後、ブラウザのバージョンアップがありました。

最初(春頃)はstyleで
table{
table-layout:fixed;
}
を指定したらなんとかうまく表示できました。
今回は春頃のバージョンのままで特に変更なく動かせるはずだったのですが。。。
そのままではダメなようです。

どのような方法があるのかアドバイスいただければと思います。
よろしくお願いします。

あるwebシステムで
現在の予約数を表示するようなhtmlを作成しています。

tableを使って、td内に予約できる数をcolspanで指定して、
現在の予約状況がひとめでわかるように表示しているのですが
なぜか、正しく表示できなくなってしまいました。
ブラウザもie6からie8にはなったのですが。

いろいろ検索してみると、似たような質問はたくさんされていましたし、
それぞれにwidth指定もすればよい・・・のように記載されていて解決されているようでした。
でも、同じように試してみましたがダメでした。(表示結...続きを読む

Aベストアンサー

colgroup とか col とかを使ってみる?

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Q行ごとにセルの幅を変えたい

たとえば、行を3つのセルに分けたとき。
行ごとに、セルの幅を変える方法を教えてください。セルの幅が750のとき。
1行目 200,300,250
2行目 300,200,250
3行目 250,500
のように分けたい。

Aベストアンサー

私はテーブルの入れ子しか思い浮かばないです。

<table width="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="750" border="0" cellpadding="0">
<tr>
<td width="200">200</td>
<td width="300">300</td>
<td width="250">250</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="750" border="0" cellpadding="0">
<tr>
<td width="300">300</td>
<td width="200">200</td>
<td width="250">250</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="750" border="0" cellpadding="0">
<tr>
<td width="250">250</td>
<td width="500">500</td>
</tr>
</table></td>
</tr>
</table>

私はテーブルの入れ子しか思い浮かばないです。

<table width="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="750" border="0" cellpadding="0">
<tr>
<td width="200">200</td>
<td width="300">300</td>
<td width="250">250</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="750" border="0" cellpadding="0">
<tr>
<td width="300">300</td>
<td width="200">200</td>
...続きを読む

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って テーブルを作成しました。(これをテーブル(1)とします。)
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。(ここで作成したテーブル(表)をテーブル(2)とします。)
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか?
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE> ここからテーブル(2)
<TBODY>
<TR>
<TD> 


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

価格.com 格安SIM 料金比較