8

4列のテーブルがあります。最初の列は、コンテンツに合わせて最小サイズにする必要があり、他の 3 つの列は同じサイズにして、テーブルの残りのスペースを消費する必要があります。テーブルもコンテンツも既知のサイズではありません。(これはかなり標準的な可変サイズのラベルと固定サイズのデータ​​ レイアウトです。)

HTML4の古き良き時代には、「相対サイズ」機能を使用して、各列のサイズを全体の比率として指定することでこれを行うことができました。

<colgroup>
  <col width="0*"/>
  <col width="1*"/>
  <col width="1*"/>
  <col width="1*"/>
</colgroup>

ただし、 width 属性は現在廃止されており、代わりに CSS を使用することになっています。しかし、これを CSS で複製する方法は見つかりませんでした。CSS サイズ指定子では、幅を固定サイズまたは全体の一部としてのみ指定できます。実際に必要なのは、最初の列が取り除かれた後の残りの部分です。

現代の技術を使用してこれを行う方法はありますか？(ただし、CSS3 は使用できないことに注意してください。)

4

1 に答える 1

0

あなたの問題を解決するために、私は少しjavascriptを使用します: http://jsfiddle.net/qR9g2/

var tableSize = 400; // example of size
var firstCol = document.getElementById('firstCol_01');
var sizeOfFirstCol = firstCol.offsetWidth;
var myOtherCols = document.getElementsByTagName('td');
var nbcols = myOtherCols.length;
var sizeOtherCols = (tableSize-sizeOfFirstCol)/(nbcols-1);
for(var i=0;i<nbcols; i++)
{
    if(myOtherCols[i].className === 'otherCols')
    {
        myOtherCols[i].style.width = sizeOtherCols+'px';
    }
}

最初にテーブル全体のサイズを指定します。次に、最初の列のサイズを取得し、残りの幅を他の列に分配します。

編集: これは CSS ソリューションです。完璧ではありませんが、何もないよりはましです: http://jsfiddle.net/qR9g2/2/

CSS では、主なアイデアは次のとおりです。

.col1{
    display:table;
    float:right;
}

最初の列にタグを追加しますdisplay:table。これはfit-content、すべてのブラウザで同様に機能します。a を追加するfloat:rightと、最初の列が右側に押し出され、テーブルの残りの部分に「くっつき」ます。

視覚的な結果はまさにあなたが望むものです。マイナス面としては、問題は、テーブルが見た目よりも多くの場所にあることです (左側)。(基本的に、4 つの列を持つ 400px のテーブルがある場合、自動的に各列に 4*100px が割り当てられます。上部の CSS ソリューションを追加すると、その列に与えられた 100px の右側にある col1 が単純にシフトされます)。

テーブルを左側にシフトするために、常に負の左マージンで遊ぶことができます (私はお勧めしません)。

于 2012-11-20T10:41:16.720 に答える