HTML：當表格在固定寬度的div內時，如何增加表格列的寬度

以下一段HTML代碼在固定寬度的div內創建表格。看起來「th，td」寬度是從父div繼承的（但W3文檔說它不是繼承的屬性！）。HTML：當表格在固定寬度的div內時，如何增加表格列的寬度

如何增加表列的寬度（比如500px）？

您可以看到，更改「th，td」選擇器中的寬度值對寬度沒有任何影響。

請注意：
- 我不想改變div的寬度
- 我不想一個固定的寬度設置爲我的桌子
- 我已經嘗試了「表佈局：固定;」裏面的表選擇器。它沒有使「td，th」寬度屬性有效。

<!DOCTYPE html> 
<html> 

    <head> 
     <style> 
      table { 
       border-collapse:collapse; 
      } 
      table, td, th { 
       border:1px solid black; 
      } 
      th, td { 
       /* Changing width doesn't make any difference */ 
       width:500px; 
      } 
      .myclass { 
       width:200px; 
       overflow:auto 
      } 
     </style> 
    </head> 

    <body> 
     <div class="myclass"> 
      <table> 
       <tr> 
        <th>Firstname</th> 
        <th>Lastname</th> 
        <th>Savings</th> 
        <th>Expenditure</th> 
       </tr> 
       <tr> 
        <td>Peter</td> 
        <td>Griffin</td> 
        <td>$100</td> 
        <td>$50</td> 
       </tr> 
      </table> 
     </div> 
    </body> 

</html>

來源

2013-08-28 nishant80

在代碼中，容器的總寬度爲200像素，並且您的TD寬度設置爲500像素。這怎麼可能。 –

@Sharath：溢出：.myclass中的自動讓我滾動瀏覽內容。 – nishant80

最後，讓它工作！

「表格佈局：固定的;寬度：100％」的伎倆......

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
     table { 
      border-collapse:collapse; 
     } 
     table, td, th { 
      border:1px solid black; 
     } 
     th, td { 
      /* Changing width doesn't make any difference */ 
      width:500px; 
     } 
     .myclass { 
      width:200px; 
      overflow:auto 
     } 
    </style> 
</head> 

<body> 
    <div class="myclass"> 
     <table> 
      <tr> 
       <th>Firstname</th> 
       <th>Lastname</th> 
       <th>Savings</th> 
       <th>Expenditure</th> 
      </tr> 
      <tr> 
       <td>Peter</td> 
       <td>Griffin</td> 
       <td>$100</td> 
       <td>$50</td> 
      </tr> 
     </table> 
    </div> 
</body> 

</html>

來源

2013-08-29 12:07:36 nishant80

爲什麼不使用百分比？

的jsfiddle：http://jsfiddle.net/qCYDq/

也就會限制自己在寬度爲200px，如果表（字寬）內的文本比你200像素這將迫使其寬度再大一些會導致您滾動出現的桌子會伸展以適應單詞。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
table { 
    border-collapse:collapse; 
    width: 100%; 
    font-size: 9px; 
} 
td,th { 
    border:1px solid black; 
    width: 25%; 
} 
.myclass 
{ 
    width:200px; 
    overflow:auto 
} 
</style> 
</head> 
<body>  
<div class="myclass"> 
    <table> 
     <tr> 
      <th>Firstname</th> 
      <th>Lastname</th> 
      <th>Savings</th> 
      <th>Expenditure</th> 
     </tr> 
     <tr> 
      <td>Peter</td> 
      <td>Griffin</td> 
      <td>$100</td> 
      <td>$50</td> 
     </tr> 
    </table> 
</div> 
</body> 
</html>

來源

2013-08-28 11:42:21

你不應該不必要地使用內聯-css –

不能通過CSS分配td或th的寬度？你可以！ –

@SimonStaton：感謝您的回覆，但百分比也沒有任何影響！請注意，我希望所有列都具有相同的寬度。我應該能夠在px中設置寬度。 – nishant80

HTML：當表格在固定寬度的div內時，如何增加表格列的寬度

回答

相關問題