Почему эта таблица игнорирует указанные мной размеры строк / столбцов?

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

Это работает для меня: http://jsfiddle.net/9SmQg/9/

Answer 3

Я чувствую, что набрал это предложение несколько раз в эти выходные :)

Таблицы обрабатываются по-разному в браузерах, реквизиты / спецификации (преднамеренно?) Снисходительны, они делают то, что хотят ... таблицы рассчитаны на растяжение - вы больше не можете фиксировать их размеры - по крайней мере не надежно пересекаются -browser

один из способов сделать это - использовать абсолютное позиционирование .. ваш стол уже абсолютно позиционирован, остальное будет просто, если его поместить в абсолютно позиционированный div

недавний вопрос и пример здесь

ширина не требуется