w3-table列的寬度不等寬

我使用w3css的類w3-table。我設置寬度爲35px和高度爲35px的每個「td」的寬度。我發現寬度仍然根據文字改變。w3-table列的寬度不等寬

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css"> 
<style> 
    .box{ 
     width: 35px; 
     height: 35px; 
     border: 1px solid black; 
    } 

    .yellow { 
     background-color: yellow !important; 
    } 
</style> 
<body> 

<table class="w3-table"> 
    <tbody> 
     <tr> 
     <td class="box yellow">20</td> 
     <td class="box yellow">1000</td> 
     <td class="box yellow">2</td> 
     <td class="box yellow">10</td> 
     <td class="box yellow">1000</td> 
     </tr> 
     <tr> 
     <td class="box yellow">&nbsp;</td> 
     <td class="box yellow">&nbsp;</td> 
     <td class="box yellow">&nbsp;</td> 
     <td class="box yellow">&nbsp;</td> 
     <td class="box yellow">&nbsp;</td> 
     </tr> 
    </tbody> 
</table> 

</body> 
</html>

凡我附上如下結果輸出：

有有標記，以方便A，B，C，d，E列我解釋一下。 A和文本20 乙與文本1000 下用文本2 d與文本10 e爲文本1000

A和d柱分別具有即20和10兩位數字的文本。我預計A和D有相同的寬度，但輸出結果顯示寬度略大於D.我可以斷定第一列總是比其他列稍大。我還注意到，列寬根據文本數量而改變。 B列中的示例1000和E列中C列寬度更大。

我可以知道如何確保列寬能夠在每列中保持固定的大小比例，同時能夠維護響應式網頁嗎？

我很感激你能不能給我一些提示。

來源

2017-02-21 HenryLoke

你的想法是錯誤的。爲什麼當您的表格寬度爲100％時，爲每列提供固定的35像素寬度？這是你的問題的原因。需要時使用百分數和最小/最大寬度屬性。 – plvice

我很感激你是否能夠通過修改源代碼向我展示正確的想法。謝謝。 – HenryLoke

做這個改變

.yellow { 
    background-color: yellow !important; 
    max-width:35px; 
}

這將使所有列的寬度相等，即使它具有較大的值。這裏是正在運行的例子：

.box{ 
 
    width: 35px; 
 
    height: 35px; 
 
    border: 1px solid black; 
 
} 
 
.yellow { 
 
    background-color: yellow !important; 
 
    max-width:35px; 
 
}

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <title>W3.CSS</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css"> 
 
    </head> 
 

 
    <body> 
 
    <table class="w3-table"> 
 
     <tbody> 
 
      <tr> 
 
      <td class="box yellow">20</td> 
 
      <td class="box yellow">1000</td> 
 
      <td class="box yellow">289834595</td> 
 
      <td class="box yellow">10</td> 
 
      <td class="box yellow">1000</td> 
 
      </tr> 
 
      <tr> 
 
      <td class="box yellow">&nbsp;</td> 
 
      <td class="box yellow">&nbsp;</td> 
 
      <td class="box yellow">&nbsp;</td> 
 
      <td class="box yellow">&nbsp;</td> 
 
      <td class="box yellow">&nbsp;</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
    </body> 
 
    </html>

來源

2017-02-21 10:04:19

謝謝你的回覆。它修復了寬度問題。順便說一句，是否有可能修復第一列填充左邊呢？ – HenryLoke

你能更具體，不能得到你的問題。@HenryLoke –

順便說一句@HenryLoke如果答案解決了你的問題，你可以用tick標記爲接受。 –

在你的CSS文件

table{ 
    table-layout: fixed; 
    width: 300px;

}

這裏的鏈接添加此http://codepen.io/myco27/pen/oBKWYq

來源

2017-02-21 09:49:42

你可以嘗試改變盒類的CSS從35px到20％

.box{ 
    width: 20%; 
    height: 35px; 
    border: 1px solid black; 
}

來源

2017-02-21 09:49:49

謝謝你的回覆。列數將更改3,4或5列。如果5行，我們不能修復20％，如果4行等，我們不能修復25％。 – HenryLoke

如果您有動態列。只要嘗試添加以下樣式 .w3-table table-layout：fixed; } –

w3-table列的寬度不等寬

回答

相關問題