html - Positioning element on right side of table header

Question

I'd like to have a little handle on the right side of my tables that can be used for resizing the column. I've got some relatively clean CSS and markup that seems to do the trick (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;
}

This seems to work great in WebKit and IE 8, but fail miserably in Firefox.

How do I make this work in Firefox as well?

Answer 1

您需要在元素div内提供一个容器并在容器上使用thposition: relative;div

演示

说明：在CSS 2.1 Specposition: relative中未定义对表格元素的影响，所以为了让你的东西正常工作，在你的元素中使用一个包装 div 并分配给它thposition: 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;
}

Answer 2

快速回答似乎只是将标题单元格的内容包装在一个 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/