3

最初の列を固定し、他の列を水平方向にスクロールできる2つの列しかないテーブルがあります。テーブルには多くの行を含めることができます。スクロール可能は、個々の列ではなく、グループとしてすべての右の列に適用する必要があります。

以下は私のテーブル構造です

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1,cell 1</td>
        <td>row 1,cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

前もって感謝します。

4

1 に答える 1

1

列への権限を 1 つのセルとして機能させたい場合は、次のようにテーブルをセットアップします。

<table>
     <tr>
         <th>Header 1</th>
         <th>Header 2</th>
     </tr>
     <tr>
          <td>row 1, cell 1</td>
          <td rowspan="2" class="scroll">spans across as may rows as rowspan, vertically</td>
      </tr>
      <tr>
          <td>row 2, cell2  </td>
      </tr>
 </table>

スクロールの場合、オプションはターゲット ブラウザによって異なります。IE の非現行バージョン (8 以前) を気にしない場合は、単純に次のスタイルを tall td に適用できます。

  td.scroll {
      overflow-x: auto;
      overflow-y: hidden;
  }

IE 8 に対応する必要がある場合は、このスタイルを適用します。

  overflow: auto;

また、セルの垂直方向のコンテンツが、垂直スクロール バーを表示するのに十分な高さでないことを確認する必要があります。固定幅の最初の列のみをターゲットにしたい場合は、

   td:first-child {
         width: 120px
   }

トリックを行うでしょう。

編集：

あなたが探している効果は、私が最初に考えたよりも達成するのがはるかに難しいです.テーブルのデフォルトのサイズと動作をオーバーライドするには、多くの時間がかかります. テーブルは内部スクロールに対して非常に強い耐性があるようです。実際、内部コンテンツが の定義された幅 tdよりも広い場合、テーブルが定義された幅よりも広く、 にoverflow設定されている場合でもscroll、 はtdに拡張されます。内容に合わせます。私が知る限り (間違っていたら訂正してください)、tdスクロールを作成する唯一の方法はmax-width. さらに、必要な固定列にはプロパティが設定されている必要があります。min-widthこれが私の実験です：

http://jsfiddle.net/thundercracker/8CUsm/19/

これは非常に流動的だとは思いませんが、2 番目の列は常に max-width プロパティで定義されている幅まで拡張されます。

ページをレイアウトするためにこのテーブルを設定しようとしている場合は、強くお勧めしません。かなり複雑ですが、より流動的な別のレイアウトを次に示します。表の行数と本文の幅を変更してみると、同じように動作します。

http://jsfiddle.net/thundercracker/adD3E/67/

このスレッドの功績は、そのセットアップの一部である必要があります。

CSS - float の子 DIV の高さを親の高さに拡張

私は実際に私が間違っていることを願っています-そして、このようなレイアウトを作成するのにそれほど時間がかからないので、誰かがこれを行うより簡単な方法を持っている場合は投稿してください.

編集: 代替レイアウトはすべての主要なブラウザーで機能し、IE 7 には簡単に修正できると思われるマイナーな問題がいくつかあるだけなので (私はすでに一度間違っていましたが)、これはかなりクロスブラウザー効果的です.

于 2012-08-05T15:14:29.830 に答える