Question

我有一张看起来像这样的表：

<table class="resizer">
    <tr>
        <td class="handle"></td>
        <td class="handle topedge"></td>
        <td class="handle"></td>
    </tr>
    <tr>
        <td class="handle leftedge"></td>
        <td></td>
        <td class="handle rightedge"></td>
    </tr>
    <tr>
        <td class="handle"></td>
        <td class="handle bottomedge"></td>
        <td class="handle"></td>
    </tr>
</table>

表的CSS如下所示：

.resizer {
    background-color: #ddd;
    width: 200px;
    height: 140px;
}

.resizer .handle {
    background-color: #500;
}

.resizer .topedge {
    height: 2px;
    cursor: n-resize;
}

.resizer .leftedge {
    width: 2px;
    cursor: w-resize;
}

.resizer .rightedge {
    width: 2px;
    cursor: e-resize;
}

.resizer .bottomedge {
    height: 2px;
    cursor: s-resize;
}

不幸的是，它没有注意我的尺寸规格。我想要的是：

顶行和底行的高度为2px
左右列的宽度为2px

这样的东西（数字代表细胞数）：

1122222222222222222233
44                  66
44                  66
44                  66
7788888888888888888899

代码

您可以在此处查看实时演示并对HTML / CSS进行更正：

jsFiddle： http://jsfiddle.net/george_edison/9SmQg/8/

Answer 1

喜欢这个吗？

http://jsfiddle.net/T9TpL/

Answer 2

我觉得这个周末我几次输入这句话：）

表格由浏览器以不同的方式处理，recs / specs（故意？）宽松，他们可以做他们想要的东西..表格设计为拉伸 - 你不能再修复它们的尺寸 - 至少不能可靠地交叉-browser

你要做到这一点的一种方法是使用绝对定位..你的桌子已经绝对定位，当定位在一个绝对定位的div内时其余的将是轻而易举的

最近question和示例here

无需宽度

Answer 3

这对我有用：http://jsfiddle.net/9SmQg/9/

为什么这个表忽略了我指定的行/列维度？

代码

3 个答案: