pst*_*ton 24 html css html-table
我在使用的列上设置固定宽度时遇到问题colspan.
似乎IE8,Firefox或Chrome都无法弄清楚如何使用colspan正确调整列的大小.
请尝试以下代码以查看操作中的问题:
<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>
任何人都可以解释为什么会发生这种情况,以及是否有解决方法.
编辑:
尝试过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">
Jos*_* M. 30
因为您的列宽是矛盾的.在第1行中,您的列宽为20,50/2; 在第2行中,您的列宽为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.
您不能拥有不同宽度的重叠colspans,表格单元格需要排列.你正试图绘制这个表:
|-----|----------|
|----------|-----|
由于列不排列,因此无效.为此,您需要添加更多列:
|-----|----.-----|
|-----.----|-----|
在哪里"." 是列跨度隐藏的列.试试这个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>
它与浏览器计算每列宽度的方式有关。表需要更多的开销，因为它们具有灵活性，并且根据您设置的维度和内容，需要超过 1 次传递。
长话短说，当您想要在后续行上设置列宽时，在第一行上使用 colspan 会搞砸工作。有很多好的方法可以解决这个问题，也有一种不好的方法，但是很简单，就是让第一行的高度为 1 像素来设置列宽度的趋势。
| 归档时间： |
|
| 查看次数： |
43965 次 |
| 最近记录： |