定位元素位于表头的右侧

Question

我想在表格的右侧稍微操作一下，可以用来调整列的大小。我有一些相对干净的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中使用此功能？

Answer 1

您需要在div元素中添加容器th，并在容器position: relative;上使用div

Demo

说明position: relative中th对表元素的影响未在CSS 2.1 Spec中定义，因此为了使您的工作正常，请在position: relative;元素中使用包装div并指定{{ 1}}到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/