1

テーブルの右側に、列のサイズ変更に使用できる小さなハンドルが必要です。トリックを行うように見える比較的きれいなCSSとマークアップをいくつか持っています( fiddle ):

HTML:

<table>
  <thead>
    <tr>
      <th>
        <span class=resize> </span>
        <div class=label>
          Column 1
        </div>
      </th>
      <th>
        <span class=resize> </span>
        <div class=label>
          Column 2
        </div>
      </th>
    </tr>
  </thead>
</table>

CSS:

table thead th {
  position: relative;
}

table thead th .resize {
  width: 8px;
  background-color: gray;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 1;
  cursor: col-resize;
}

これは WebKit と IE 8 では問題なく動作するようですが、Firefox ではうまく機能しません。

これを Firefox でも機能させるにはどうすればよいですか?

4

2 に答える 2

1

要素div内にコンテナを指定し、コンテナで使用する必要がありますthposition: relative;div

デモ

説明:position: relativeテーブル要素に対する効果はCSS 2.1 Specでは定義されていないため、機能させるには、要素内でラッピング div を使用し、それthに割り当てます。position: relative;div

HTML

<table>
  <thead>
    <tr>
      <th>
          <div class="container">
        <span class="resize"> </span>
        <div class="label">
          Column 1
        </div>
          </div>
      </th>
      <th>
          <div class="container">
        <span class="resize"> </span>
        <div class="label">
          Column 2
        </div>
           </div>
      </th>
    </tr>
  </thead>
</table>

CSS

table thead th {
  position: relative;
}

.container {
position: relative;
}

table thead th span.resize {
  width: 8px;
  background-color: gray;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 1;
  cursor: col-resize;
}
于 2012-10-31T17:55:08.367 に答える
0

簡単な答えは、ヘッダーセルの内容をdivでラップするだけのようです:

HTML:

<table>
  <thead>
    <tr>
      <th>
        <div class=wrapper>
          <span class=resize> </span>
          <div class=label>
            Column 1
          </div>
        </div>
      </th>
      <th>
        <div class=wrapper>
          <span class=resize> </span>
          <div class=label>
            Column 2
          </div>
        </div>
      </th>
    </tr>
  </thead>
</table>

CSS

table thead th .wrapper {
  position: relative;
}

table thead th .resize {
  width: 8px;
  background-color: gray;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 1;
  cursor: col-resize;
}

http://jsfiddle.net/NVYJK/1/

于 2012-10-31T17:54:05.157 に答える