正如您所看到的,在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>
&#13;