开发者

Why does this table ignore the row / column dimensions I'm specifying?

I've got a table that looks like this:

<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>

The CSS for the table looks like this:

.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;
}

Unfortunately, it's not paying any attention to my size specifications. What I want is:

  • The top and bottom row to have a height of 2px
  • The left and right column to have a width of 2px

Something like this (the numbers represent the cell number):

1122222222222222222233
44                  66
44                  66
44                  66
7788888888888888888899

Code

You can see a live demo and make corrections to the HTML / CSS here:

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


Like this?

http://jsfiddle.net/T9TpL/


This works for me: http://jsfiddle.net/9SmQg/9/


I feel like I typed this sentence a few times this weekend :)

Tables are dealt with differently by browsers, the recs/specs are (deliberately?) lenient, they get to do what they want .. tables are designed to stretch - you cannot fix their dimensions any more - at least not reliably cross-browser

one way you would do this is using absolute positioning.. your table is already absolutely positioned the rest would be a breeze when positioned inside an absolutely positioned div

recent question and example here

no widths required

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜