CSS寬度屬性無法正確應用

Question

如您所見，tr內有三個具有名稱價格和數量類別的表格單元。 我給他們每個人30％的寬度。 因此它們應該覆蓋90％的頁面，但看起來三個甚至都不能覆蓋一半的頁面，盡管當我給它們每個寬度加起來達到100％時，它們實際上可以工作，但我希望它們覆蓋了90％的頁面，該頁面似乎無法正常工作，如代碼段所示。

  #flexing .welcome .note { padding-bottom: 0; } #flexing .welcome .checkout { margin:10px; } #flexing .welcome .cart a { color:white; text-decoration: none; font-size:15.5px; } #flexing .welcome table .name { width:30%; border:1px solid red; color:red; } #flexing .welcome table .price { width:30%; border:1px solid red; color:red; } #flexing .welcome table .quantity { width:30%; border:1px solid red; color:red; } 

 <div id="flexing"> <div class="welcome"> <h3>CHECK OUT</h3> <div class="cart"><a href="storenav/cart.html">5.00 EUR</a></div> <div class="note"> <div class="checkout"> <table> <tbody> <tr> <td class="name">Name</td> <td class="price">Price</td> <td class="quantity">Quantity<td> </tr> <tr> <td>Faction | Hero rank</td> <td>5.00 EUR</td> <td class="button">1 <a href="#">aa</a> <a href="#">aa</a> <a href="#">aa</a> </td> </tr> </tbody> </table> </div> </div> </div> </div> 

Answer 1

將CSS添加到表格中，使其寬度為100％（或90％）。

 #flexing .welcome .note { padding-bottom: 0; } #flexing table { width: 100%; } #flexing .welcome .checkout { margin:10px; } #flexing .welcome .cart a { color:white; text-decoration: none; font-size:15.5px; } #flexing .welcome table .name { width:30%; border:1px solid red; color:red; } #flexing .welcome table .price { width:30%; border:1px solid red; color:red; } #flexing .welcome table .quantity { width:30%; border:1px solid red; color:red; } 

 <div id="flexing"> <div class="welcome"> <h3>CHECK OUT</h3> <div class="cart"><a href="storenav/cart.html">5.00 EUR</a></div> <div class="note"> <div class="checkout"> <table> <tbody> <tr> <td class="name">Name</td> <td class="price">Price</td> <td class="quantity">Quantity<td> </tr> <tr> <td>Faction | Hero rank</td> <td>5.00 EUR</td> <td class="button">1 <a href="#">aa</a> <a href="#">aa</a> <a href="#">aa</a> </td> </tr> </tbody> </table> </div> </div> </div> </div> 

Answer 2

在這里，您需要一個解決方案，您需要為表格提供100％的寬度

 .table { width: 100%; } #flexing .welcome .note { padding-bottom: 0; } #flexing .welcome .checkout { margin:10px; } #flexing .welcome .cart a { color:white; text-decoration: none; font-size:15.5px; } #flexing .welcome table .name { width:30%; border:1px solid red; color:red; } #flexing .welcome table .price { width:30%; border:1px solid red; color:red; } #flexing .welcome table .quantity { width:30%; border:1px solid red; color:red; } 

 <div id="flexing"> <div class="welcome"> <h3>CHECK OUT</h3> <div class="cart"><a href="storenav/cart.html">5.00 EUR</a></div> <div class="note"> <div class="checkout"> <table class="table"> <tbody> <tr> <td class="name">Name</td> <td class="price">Price</td> <td class="quantity">Quantity<td> </tr> <tr> <td>Faction | Hero rank</td> <td>5.00 EUR</td> <td class="button">1 <a href="#">aa</a> <a href="#">aa</a> <a href="#">aa</a> </td> </tr> </tbody> </table> </div> </div> </div> </div> 

Answer 3

您必須為table設置width ：table {width：100％; }

 table { width: 100%; } #flexing .welcome .note { padding-bottom: 0; } #flexing .welcome .checkout { margin:10px; } #flexing .welcome .cart a { color:white; text-decoration: none; font-size:15.5px; } #flexing .welcome table .name { width:30%; border:1px solid red; color:red; } #flexing .welcome table .price { width:30%; border:1px solid red; color:red; } #flexing .welcome table .quantity { width:30%; border:1px solid red; color:red; } 

 <div id="flexing"> <div class="welcome"> <h3>CHECK OUT</h3> <div class="cart"><a href="storenav/cart.html">5.00 EUR</a></div> <div class="note"> <div class="checkout"> <table> <tbody> <tr> <td class="name">Name</td> <td class="price">Price</td> <td class="quantity">Quantity<td> </tr> <tr> <td>Faction | Hero rank</td> <td>5.00 EUR</td> <td class="button">1 <a href="#">aa</a> <a href="#">aa</a> <a href="#">aa</a> </td> </tr> </tbody> </table> </div> </div> </div> </div>