解決table表頭加了colspan,導致td設置寬度失效問題


找了大半個小時,網上都是千變一律的添加<colgroup>標簽,但是和我試了,在我這里沒效果。

無意中搜索colspan標簽,來到w3c,查看colspan效果,發現這里表頭合並了,但是內容的td寬度並沒有失效。

仔細看了下發現問題所在

w3c代碼:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3C</title> 
</head>

<body>

<table border="1">
  <tr>
    <th colspan="2">Monthly Savings</th>
  </tr>
  <tr>
    <td width="200">January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

  我的代碼

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>xxxxx</title> 
</head>

<body>

<table border="1">
<thead>
  <tr>
    <th colspan="2">Monthly Savings</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td width="200">February</td>
    <td>$80</td>
  </tr>
</tbody>
</table>
</body>
</html>

  仔細看,唯一的區別就是我的代碼多了<thead>和<tbody>標簽,去掉了<thead>標簽,td的寬度就生效了,至於到底什么原因就不清楚了

如果table加了table-layout: fixed;這個屬性,要去掉

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM