5

アクションのアイコン/リンクを保持しているだけなので、最後の 3 つの列をできるだけ小さく設定しようとしています。

また、大きなテキスト列の残りの幅をできるだけ多くしたいと思います。

これが私が見つけることができたものですが、私にとってはうまくいきませんでした：

2 列のテーブル: 1 つはできるだけ小さく、もう 1 つは残りの部分を取ります

できるだけ多くのスペースを占有したい列が複数あるため、この解決策はうまくいきません。幅 = 100% に設定することはできません。

列のサイズを可能な限り小さくする

相対的な長さ (width="*") を使用してみましたが、効果がないようです。以前に幅を設定しなかったため、配布する「残りの幅」がないためでしょうか?

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:"*";
}

したがって、優先順位は次のとおりです。

  • 表は親コンテナーの幅全体にまたがります

  • 最後の 3 つのアイコン/アクション列は、カットオフなしでできるだけ小さくする

  • 「大きな」データ (クラスのタイトルと説明) を含む列は、残りのスペースを可能な限り占有する必要があります。

  • 「中」データを含む列は、コンテンツのサイズで、両側にいくらかのマージンがある必要があります（これを達成するのが難しすぎる場合は、固定幅を入れるだけでかまいません）

colgroup タグと col タグは必要ありませんが、便利な場合に備えてここに残しておきます。それらを使用する場合と使用しない場合のさまざまな順列を試しましたが、まだ機能していないようです。データ列にパーセントを使用することも考えましたが、最適ではない可能性がある定義済みのルールを課すのではなく、実際のコンテンツに基づいてブラウザーが幅を決定するようにしたいと考えています。

4

2 に答える 2

3

縮小する列の幅を 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;
}

その後、コルグループを完全に取り除くことができます。

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

ところで、代わりにCSS フレキシブル ボックスの使用を検討することもできます。

于 2015-09-16T16:52:59.510 に答える
0

あなたの要求の1つに答えるために：

最後の3つのアイコン/アクション列は、カットオフなしで可能な限り小さくする

これを行うにはfloat、tdsまたはそれらをに設定しますdisplay:inline-block;

使用しているアイコンのサイズがわかっている場合は、th上のアイコンの幅を設定できます（これを私は呼びます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は、画面サイズが非常に小さくなるとスタックします。

于 2012-06-26T02:42:48.447 に答える