时间戳

首页 > 解决方案 > css 宽度属性未正确应用

css - css 宽度属性未正确应用

问题描述

如您所见，在 tr 中有三个名称为 price 和 quantity 类的表格单元格。我给了他们每个人 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>

标签： css

解决方案

将 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>

推荐阅读