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

Question

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/

@Kevin: But then how would cells 2, 5, and 8 keep their widths equal? — Nathan Osman, Apr 09 '11 at 18:51
@Georige: http://jsfiddle.net/3GyAK/1/ (Only tested in Chrome, probably needs some more fooling around). — Kevin, Apr 09 '11 at 19:00

score 3 · Accepted Answer · answered Apr 09 '11 at 18:57

3

Like this?

http://jsfiddle.net/T9TpL/

answered Apr 09 '11 at 18:57

fl00r

82,987
33
217
237

**Wow.** All it needed was an empty space? – Nathan Osman Apr 09 '11 at 19:00

score 0 · Answer 2 · edited May 23 '17 at 11:45

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

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

Code

3 Answers3