Geek asks and answers

IE does not consider td width

I have a table layout that is divided into four columns, two of which are for filling. In most browsers, it works fine, but at least on IE9 in normal mode and compatibility mode, the cells are not the size they should be.

I tried defining the width of both the attributes and the CSS styles, but it doesn't seem to help. See the script for a demonstration.

I want to:

+------------------------------------------+
|  320          | 20 | 39   |  320         |
|               |    |      |              |
+------------------------------------------+

I get: (rounded, decimal values)

+------------------------------------------+
|  324          | 19 | 34   |  321         |
|               |    |      |              |
+------------------------------------------+

With actual content instead of filler material, the difference is even more exaggerated, the leftmost column is 357 and the rightmost is 299 pixels wide.

, . .

HTML, .

+3
4

- . , , , :

<tr><td colspan="4">Some long text here</td></tr>

, :

<tr><td colspan="4" width="700">Some long text here</td></tr>

700 , , , , . ​​IE.

+1

, , .

, , , , .

, , , .

+3

It would help to see your CSS and HTML. But don't forget about borders when measuring the overall width of a table.

margin + border + padding + width = real width.

Also, make sure you do not have an element in one of these cells that is larger than the cell width.

+1
source 
<table width="699" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="320" height="50" valign="top"><!--test-->&nbsp;</td>
    <td width="20" valign="top"><!--test-->&nbsp;</td>
    <td width="39" valign="top"><!--test-->&nbsp;</td>
    <td width="320" valign="top"><!--test-->&nbsp;</td>
  </tr>
</table>

it should work

0
source

More articles:


All Articles