鉻表擴展時，包裝

我有一個表，我設置了固定的「名稱」列寬度爲200px。鉻表擴展時，包裝

當任何一行中的文本回捲到下一行（製作一個2行單元格）時，每隔一列就會被擴展。對於一個可重複的代碼片段，見下圖：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
table 
{ 
border-collapse:collapse; 
} 
table, td, th 
{ 
border:1px solid black; 
} 
tr:nth-child(even) { 
    background-color: #ddddff; 
} 
</style> 
</head> 

<body> 



<table style="position:fixed;background-color:white;top:0;left:100px;"> 
     <tr> 
      <td width="200px;"> 
       Park Name 
      </td> 
      <td> 
       Park Viewed 
      </td> 
      <td> 
       Book Now Button 
      </td> 
      <td> 
       Website Button 
      </td> 
      <td> 
       Call Button 
      </td> 
      <td> 
       Email Button 
      </td> 
      <td> 
       Book Now Call Button 
      </td> 
     </tr> 
</table> 
<table style="margin-left:100px;margin-top:20px"> 
    <tr> 
     <td width="200px;"> 
      Park Name 
     </td> 
     <td> 
      Park Viewed 
     </td> 
     <td> 
      Book Now Button 
     </td> 
     <td> 
      Website Button 
     </td> 
     <td> 
      Call Button 
     </td> 
     <td> 
      Email Button 
     </td> 
     <td> 
      Book Now Call Button 
     </td> 
    </tr> 


     <tr> 
      <td> 
       Camp Hatteras RV Resort and Campground 
      </td> 
      <td> 
        1 
      </td> 
      <td> 

      </td> 
      <td> 

      </td> 
      <td> 

      </td> 
      <td> 

      </td> 
      <td> 

      </td> 
     </tr> 

</table> 

</body> 
</html>

如果你測試它，縮短了公園的名稱（以便它不換行）將提供預期的行爲。問題是，當表擴展時，固定頭（它本身就是一張表）不再與數據表的大小相同。

編輯：將CSS移入代碼片段，以便它不是外部源。

來源

2013-10-16 Chris

把你的頭在THEAD，而不是一個差異表

<table> 
    <thead> 
    <tr> 
     <th class="name">col1</th> 
     <th>col2</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>data col1</td> 
     <td>data col2</td> 
    </tr> 
    </tbody> 
</table>

然後樣式類

th.name {width: 200px}

這應該照顧的寬度爲頭和數據都

來源

2013-10-16 17:00:03 Vlad

感謝您的想法，但這並沒有工作 – Chris

你可以創建一個jsfiddle來顯示我嗎？ – Vlad

鉻表擴展時，包裝

回答

相關問題