私は最後の3つの列を、アクションのアイコン/リンクを保持しているので、できるだけ小さく設定しようとしています。列幅をできるだけ小さくするにはどうすればよいですか?
私はまた、大きなテキストの列にできるだけ残りの幅を持たせたいと思います。ここで
は、私が見つけることができたものですが、私のために動作しませんでした:
Two columns table : one as small as possible, the other takes the rest
私はできるだけ多くを取るしたい複数の列を持っているので、このソリューションは、私のために動作しません。スペースはできるだけスペースがないので、width = 100%に設定することはできません。
force column size to smallest possible
私は相対的な長さ(幅=「*」)を使用してみましたが、何の影響も与えていないようです。たぶんそれは、私は事前に任意の幅を設定しなかったので、残りの幅はありません。
HTML:
<table>
<colgroup class='data' span='5'>
<col class='date' span='1'/>
<col class='id' span='1'/>
<col class='title' span='1'/>
<col class='status' span='1'/>
<col class='description' span='1'/>
</colgroup>
<colgroup class='action' span='3'>
<col class='show' span='1'/>
<col class='edit' span='1'/>
<col class='delete' span='1'/>
</colgroup>
<tr>
<th>Date</th>
<th>ID</th>
<th>Title</th>
<th>Status</th>
<th>Description</th>
<th colspan='3'></th>
</tr>
<tr>
<td class='date'>medium</td>
<td class='id'>medium</td>
<td class='title'>large</td>
<td class='status'>medium</td>
<td class='description'>large</td>
<td class='show'>small</td>
<td class='edit'>small</td>
<td class='delete'>small</td>
</tr>
</table>
CSS:優先度の高い順にそう
table {
width: 100%;
}
table td.title, td.description {
text-align: left;
}
table td.date, td.id, td.status {
text-align: center;
}
table td.show, td.edit, td.delete {
}
table colgroup.action col {
width:"1*";
}
table colgroup.data col {
width:"*";
}
:
テーブルには、最後の親コンテナの幅全体
にまたがります〜する「大規模な」データ(クラスのタイトルと説明)と
列が列可能
として残りのスペースの多くを取る必要がある任意のカットせずに可能な限り小さくするために電子アイコン/アクション列「中」のデータが両側にいくつかの余裕をもって自分のコンテンツのサイズでなければなりませんと(それがこれを達成するためにあまりにも難しい場合、私はちょうど一定の幅で投げる気にしない)
私は必要はありません。 colgroupタグとcolタグがありますが、便利な場合に備えてここに残しました。私はそれらを使用していないし、使用していない別の順列を試みたが、まだそれを動作させるように見えることはできません。また、データ列にパーセントを使用することも考えましたが、最適ではない可能性がある事前定義されたルールを追加するのではなく、実際のコンテンツに基づいてブラウザが幅を判断するようにしたいと考えています。あなたの要求の一つに答えるために
widthプロパティには、width = "*"およびwidth = "1 *"は両方とも無効な値です。それをしないでください。 –