TABLE内でのwidth指定

解決済

質問者：delta-re
質問日時：2006/08/16 21:24
回答数：4件

<table>
<tr><th colspan="3">●</th></tr>
<tr><td class="1">■</td>
<td class="2">▲</td>
<td class="3">★</td></tr>

<tr><th colspan="3">○</th></tr>
<tr><td class="1">□</td>
<td class="2">△</td>
<td class="3">☆</td></tr>
</table>

このサンプルについて考えています。
●○が、割と長い文字列になります。

この時、例えば2段目の左の列が、■,□のうち長い方の文字列に合わせて「width」が表示されるためには、スタイル「class="1"」の内容をどう記述すれば良いのでしょうか。
デフォルトの「width:auto」では、●○の長さに引っ張られてしまい、余分なスペースが出来てしまいます。
2段目の中の列（▲△部分）が短文を記述するセルなので、●○に合わせる必要のあるスペースは、全てここで吸収してしまいたいのです。

同じ仕組みで幾つかテーブルを組みますので、【class="1"】のwidthにpx,%等といった値自体を指定するのは向いていません。

ご指導おねがいします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.4

回答者： seaw
回答日時：2006/08/17 02:54

すみません、ソースの4行目にミスがありました。

ちなみに、スクリーンショットは、Mozilla Filefox 1.5.0.6(Windows)、Internet Explorer 6.0.2(Windows)、Opera 9.01(Windows)、Konqueror 3.4.2(Linux)のものを撮っています。

-----[ソース]-----

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="robots" content="NOINDEX, NOFOLLOW">
<style type="text/css">
body {
background-color: #ffffff;
color: #000000;
}
table.test{
background-color: #000000;
border: 1px solid #000000;
empty-cells: show;
border-spacing: 1px;
}
table.test td {
background-color: #ffffff;
color: #000000;
padding: 3px;
}
table.test col.l1 {
width: 3em;
}
table.test col.l2 {
width: 22em;
}
table.test col.l3 {
width: 5em;
}
</style>
<title><table>要素テスト</title>
</head>
<body>
<h1><table>要素テスト</h1>

<table summary="サンプルテーブル" class="test">
<colgroup>
<col class="l1">
<col class="l2">
<col class="l3">
</colgroup>
<tr>
<td colspan="3">●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●</td>
</tr>
<tr>
<td>■■■</td>
<td>▲▲▲▲</td>
<td>★★★★★</td>
</tr>
<tr>
<td colspan="3">○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</td>
</tr>
<tr>
<td>□□□</td>
<td>△△△△</td>
<td>☆☆☆☆☆</td>
</tr>
</table>

</body>
</html>

- 0
- 件

通報する

No.3ベストアンサー

回答者： seaw
回答日時：2006/08/17 02:46

多くのブラウザに対応させるには、縦列の幅指定するしかないのかもしれません。

サンプルソースのスクリーンショット
http://www.dotup.org/uploda/www.dotup.org6435.png

-----[サンプルソース]-----

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="robots" content="NOINDEX, NOFOLLOW">
<style type="text/css">
body {
background-color: #ffffff;
color: #000000;
}
table.test{
background-color: #000000;
border: 1px solid #000000;
empty-cells: show;
border-spacing: 1px;
}
table.test td {
background-color: #ffffff;
color: #000000;
padding: 3px;
}
table.test col.l1 {
width: 3em;
}
table.test col.l2 {
width: 22em;
}
table.test col.l3 {
width: 5em;
}
</style>
<title><table>要素テスト</title>
</head>
<body>
<h1><table>要素テスト</h1>

<table summary="サンプルテーブル" class="test">
<colgroup>
<col class="l1">
<col class="l2">
<col class="l3">
</colgroup>
<tr>
<td colspan="3">●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●</td>
</tr>
<tr>
<td>■■■</td>
<td>▲▲▲▲</td>
<td>★★★★★</td>
</tr>
<tr>
<td colspan="3">○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</td>
</tr>
<tr>
<td>□□□</td>
<td>△△△△</td>
<td>☆☆☆☆☆</td>
</tr>
</table>

</body>
</html>

- 0
- 件

通報する

No.2

回答者： doublebeefcake
回答日時：2006/08/16 22:07

ご質問の意味がちょっとわからないので的外れな意見だったらご容赦ください。

.1 {
width : 1% ;
}

- 0
- 件

通報する

No.1

回答者： suzuko
回答日時：2006/08/16 21:32

<table>

<tr><th colspan="3">●</th></tr>
<tr><td class="1" nowrap="nowrap">■</td>
<td class="2">▲</td>

か

.1 {
white-space: nowrap;
}

ではどうでしょうか？

- 1
- 件

通報する

この回答へのお礼

申し訳ありません、説明不足でしたので、お礼の場を借りて補足いたします。
一部のTABLEでは"nowrap"で上手くいくのですが、TABLEによっては

●≧■+▲+★

になっている物があるのです。
この場合、■部分には、●の長さに合わせるため、文字列よりも広いwidthが取られてしまいますよね。
これを避けたいワケです。
■+▲+★で足りないwidthは、全て▲（class="2"）の部分に集約してしまいたいということです。

通報する

お礼日時：2006/08/16 21:41

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