[HTML]表格Table寬度設定無效的解決方案

表格Table寬度設定無效的解決方案

 

在對設定表格設定table-layer:fixed樣式後，發現表格中有一行合并過，其它沒有合并的行的列寬會平均化，對列寬的設定會失效。
請看如下代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title>test</title><br /></head><br /><body style="width:98%; height:100%; margin-left:0px; margin-top:0px"><br /><table style="border:1px solid #0000FF; table-layout:fixed; width:100%; height:90%;" border="1"><br /><tbody><br /><tr><br /> <td colspan="3">dd</td><br /> </tr><br /> <tr><br /> <td style="width:60%">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td><br /> <td style="width:20%">ddddd</td><br /> <td style="width:20%">CCCCCCCC</td><br /> </tr></p><p> <tr><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> <tr><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> </tbody><br /></table><br /></body><br /></html>
 提示：您可以先修改部分代碼再運行

如果把表格的合并行去掉，又能正常顯示。

 

原因：

table-layout: fixed 的表格，各列寬度由第一行決定，後面指定的寬度會被忽略。
你第一行合并了，所以各列寬度均分了。

 

解決方案：

在tbody前加
<col style="width: 60%" />
<col style="width: 20%" />
<col style="width: 20%" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title>test</title><br /></head><br /><body style="width:98%; height:100%; margin-left:0px; margin-top:0px"><br /><table style="border:1px solid #0000FF; table-layout:fixed; width:100%; height:90%;" border="1"><br /><col style="width: 60%" /><br /><col style="width: 20%" /><br /><col style="width: 20%" /><br /><tbody><br /><tr><br /> <td colspan="3">dd</td><br /> </tr><br /> <tr><br /> <td style="width:60%">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td><br /> <td style="width:20%">ddddd</td><br /> <td style="width:20%">CCCCCCCC</td><br /> </tr></p><p> <tr><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> <tr><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> </tbody><br /></table><br /></body><br /></html>
 提示：您可以先修改部分代碼再運行