列幅をできるだけ小さくするにはどうすればよいですか？

Question

私は最後の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タグがありますが、便利な場合に備えてここに残しました。私はそれらを使用していないし、使用していない別の順列を試みたが、まだそれを動作させるように見えることはできません。また、データ列にパーセントを使用することも考えましたが、最適ではない可能性がある事前定義されたルールを追加するのではなく、実際のコンテンツに基づいてブラウザが幅を判断するようにしたいと考えています。あなたの要求の一つに答えるために

Answer 1

：これを行うには任意のカットオフに せずに、できるだけ小さくなるように

を

最後の3アイコン/アクション列を、私はtd秒floatうまたはそれらに設定するdisplay:inline-block;

使用しているアイコンのサイズがわかっている場合は、thの幅を設定することができますeアイコン（これはclass="icons"と呼ぶ）。

幅がわからない場合は、いくつかのjQueryを使用して計算できます。

var a = $('td.show').width(); 
var b = $('td.edit').width(); 
var c = $('td.delete').width(); 

$('.icons').css('width', a+b+c+6+"px"); 

例：私は

注例で投げたボーダービットからパッドに必要なhttp://jsfiddle.net/KQs2K/1/

エクストラ計6Px：画面サイズは、実際の小さななったときにこれらのtd sがスタックします。あなたが縮小するカラムの

Answer 2

、1つのピクセルに幅を設定します。

table { 
    width: 100%; 
} 

th, td { 
    border: 1px solid #eee; 
} 

td.title, td.description { 
    text-align: left; 
} 

td.date, td.id, td.status { 
    padding: 0 10px; 
    text-align: center; 
    width: 1px; 
} 

td.show, td.edit, td.delete { 
    width: 1px; 
} 

は、その後、あなたが完全にcolgroupsを取り除くことができます。

デモhereを参照してください。

ところで、CSS flexible boxesを代わりに使用することをおすすめします。