colspan width issue
I'm having trouble setting fixed widths on columns which use colspan.
It seems that neither IE8, Firefox or Chrome can figure out how to correctly size columns开发者_开发百科 with colspan.
Try the following code to see the problem in action:
<h2>One table with colspans, incorrect cell dimensions</h2>
<table border="1">
<tr>
<td style="width:20px;">20</td>
<td style="width:50px;" colspan="2">50</td>
<td>a</td>
<td>a</td></tr>
<tr>
<td style="width:50px;" colspan="2">50</td>
<td style="width:20px;">20</td>
<td>a</td>
<td>a</td></tr>
</table>
<h2>Split tables, correct cell dimensions</h2>
<table border="1">
<tr>
<td style="width:20px;">20</td>
<td style="width:50px;">50</td>
<td>a</td>
<td>a</td></tr>
</table>
<table border="1">
<tr>
<td style="width:50px;">50</td>
<td style="width:20px;">20</td>
<td>a</td>
<td>a</td></tr>
</table>
Can anyone explain why this might be happening, and if there is a workaround.
EDIT:
have tried doctypes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Because your column widths are contradicting. In row 1 you have columns widths 20, 50/2; in row 2 you have column widths 50/2, 20.
Row 1, Column 1 is defined as 20.
Row 1, Column 2 is defined as 50.
Row 2, Column 1 is defined as 50.
Row 2, Column 2 is defined as 20.
You can't have overlapping colspans of different widths, the table cells need to line up. You're trying to draw this table:
|-----|----------|
|----------|-----|
Which is not valid since the columns don't line up. In order to do this you need to add more columns:
|-----|----.-----|
|-----.----|-----|
Where "." is a column that is hidden by the column span. Try this HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
<table border="1" style="table-layout: fixed;">
<colgroup>
<col style="width: 20px;"/>
<col style="width: 30px;"/>
<col style="width: 20px;"/>
</colgroup>
<tbody>
<tr>
<td>20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="2">50</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
It has to do with the way browsers calculate the widths for each column. Tables require more overhead because of their flexible nature and more than 1 pass depending on what dimensions you set and content.
To make a long story short, colspan on the first row when you want to set column widths on subsequent rows gums up the works. There are plenty of good ways to fix it, a bad way, however easy would be to have the very first row with 1 pixel of height setting the trend for the column widths.
加载中,请稍侯......
精彩评论