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>