表格單元格（td，th）不佔用colgroup組中的寬度

我正在嘗試使用colgroup的col元素給表格單元格指定最小寬度。 table被div包圍，其具有一些寬度集（小於在col中設置的所有單元的組合寬度），並且overflow的div被設置爲auto。表格單元格（td，th）不佔用colgroup組中的寬度

這裏是我的html代碼 -

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     .table-block { 
      border-spacing: 0; 
      border-collapse: collapse; 
     } 

     .cell { 
      padding: 5px 10px; 
      border: 1px solid silver; 
     } 
    </style> 
</head> 
<body> 
<div style="width:200px;overflow: auto"> 
    <table class="table-block"> 
     <colgroup> 
      <col style="width:300px"> 
      <col style="width:300px"> 
     </colgroup> 
     <tbody> 
     <tr> 
      <td class="cell"><em>2(0,2)</em></td> 
      <td class="cell"><em>3(0,3)</em></td> 
     </tr> 
     <tr> 
      <td class="cell"><em>2(0,2)</em></td> 
      <td class="cell"><em>3(0,3)</em></td> 
     </tr> 
     </tbody> 
    </table> 
</div> 
</body> 
</html>

我的問題是細胞不從col採取寬度。它試圖讓自己適應包裝div。我希望單元格具有適當的寬度，並且應該出現一個滾動條。我有一個解決方案，我將table寬度設置爲我需要的總寬度。這需要我每次用JavaScript插入新列時更新table寬度。

我的解決方案 -

<div style="width:200px;overflow: auto"> 
     <table class="table-block" style="width:600px"> 
     <!-- table things --> 
</div>

它是做正確的事？爲什麼會發生？

的jsfiddle link

來源

2013-02-19 Moazzam Khan

我覺得這裏的問題是，最終該表默認爲容器的寬度爲100％，而其內部元件無法超越這一點沒有他們的內容，迫使它這樣做。嘗試給tr或td的寬度大於表格自己的寬度時會發生同樣的情況。

您的修復方法與我的做法相當。我會做的唯一的變化是：

<div style" ... overflow-x:scroll; overflow-y:hidden;">

這樣滾動條就不會出現向下舊版本的IE瀏覽器的一側。

這當然假定您只希望您的表水平滾動。

來源

2013-02-19 09:49:55

表格單元格（td，th）不佔用colgroup組中的寬度

回答

相關問題