html - 表头右侧的定位元素

Question

我希望在表格的右侧有一个小 handle ，可用于调整列的大小。我有一些相对干净的 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的效果在表元素上未定义 CSS 2.1 Spec ，所以为了让你的东西工作，在你的 th 中使用一个包装 div元素并分配 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;
}