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
精彩评论