移动设备上的表格行不跨越 100% 宽度

Question

我有一张用于网站购物篮的桌子。这一切都很好，但只要我添加了tfoot，tbody 就不会 100% 跨越容器的宽度。

我很确定问题与tfoot 有关，但我不知道是什么。我认为这与 colspan 无法在移动设备上工作有关，因为我将其中一个细胞隐藏在体内（因此它是不均匀的），但这没有任何作用。

这是我的例子：https://codepen.io/moy/pen/KQJdbV

.page {
  margin: 0 auto;
  max-width: 1000px;
}


/**
 * Basket table rules.
 */

.basket {
  width: 100%;
}

.basket td > *:last-child {
  margin-bottom: 0;
}

.basket__head th {
  display: none;
}

.basket__head th:first-child {
  display: block;
}

@media only screen and (min-width: 800px) {
  .basket__head th {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .basket__head th:first-child {
    display: table-cell;
    text-align: left;
  }
}

.basket__body tr {
  border-bottom: 2px solid #eee;
  display: block;
  padding: 15px;
}

.basket__body td {
  border-bottom: 0;
  display: block;
  padding: 0;
}

.basket__body td.basket__price {
  display: none;
}

@media only screen and (min-width: 800px) {
  .basket__body {
    text-align: center;
  }
  .basket__body tr {
    display: table-row;
  }
  .basket__body td {
    border-bottom: 2px solid #eee;
    display: table-cell;
    padding: 15px;
    vertical-align: middle;
  }
  .basket__body td.basket__price {
    display: table-cell;
  }
}

.basket__foot {
  border-bottom: 2px solid #eee;
  color: #111;
  font-weight: 700;
  text-align: right;
  text-transform: uppercase;
}

.basket__foot td {
  border-bottom: none;
}

.basket__foot tr:first-child td {
  padding: 30px 15px 0;
}

.basket__foot tr:last-child td {
  padding: 15px 15px 30px;
}

.basket__foot p {
  font-size: 20px;
}


/**
 * Basket images.
 */

.basket__image {
  float: left;
  width: 135px;
}

.basket__image img {
  display: block;
  width: 100%;
  max-width: 100%;
}

@media only screen and (min-width: 800px) {
  .basket__image {
    float: none;
  }
}


/**
 * Basket descriptions.
 */

.basket__desc {
  margin-left: 150px;
}

@media only screen and (min-width: 800px) {
  .basket__desc {
    margin-left: 0;
    padding-left: 0;
    text-align: left;
  }
}

.basket__desc h1,
.basket__desc h2,
.basket__desc h3,
.basket__desc h4 {
  font-size: 14px;
  margin-bottom: 5px;
}

@media only screen and (min-width: 800px) {
  .basket__desc h1,
  .basket__desc h2,
  .basket__desc h3,
  .basket__desc h4 {
    font-size: 16px;
    margin-bottom: 0;
  }
}

.basket__desc p {
  font-size: 12px;
  margin-bottom: 5px;
}

@media only screen and (min-width: 800px) {
  .basket__desc p {
    font-size: 14px;
  }
}


/**
 * Basket quantity.
 */

.basket__qty {
  margin-left: 150px;
}

.basket__qty .qty {
  margin: 15px 0 0;
}

@media only screen and (min-width: 800px) {
  .basket__qty {
    margin-top: 20px;
    width: 105px;
  }
}


/**
 * Basket price.
 */

.basket__price {
  color: #111;
  display: none;
  width: 120px;
}

@media only screen and (min-width: 800px) {
  .basket__price {
    display: table-cell;
  }
}

.basket-form {
  overflow: hidden;
}

.basket-form .btn {
  margin-bottom: 10px;
  width: 100%;
}

@media only screen and (min-width: 800px) {
  .basket-form .btn {
    float: right;
    margin: 0 0 0 15px;
    width: auto;
  }
}

<div class="page">
  <form class="basket-form">
    <table class="basket">
      <thead class="basket__head">
        <tr>
          <th colspan="2">Item</th>
          <th>Qty</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody class="basket__body">
        <tr>
          <td class="basket__image">
            <img src="http://via.placeholder.com/350x200" alt="ALT TEXT" />
          </td>
          <td class="basket__desc">
            <h2>Sirloin Steaks</h2>
            <p>2 x 227g/8oz Steaks</p>
            <p>£11.60</p>
          </td>
          <td class="basket__qty">1</td>
          <td class="basket__price">
            <p><strong>£23.20</strong></p>
          </td>
        </tr>
        <tr>
          <td class="basket__image">
            <img src="http://via.placeholder.com/350x200" alt="ALT TEXT" />
          </td>
          <td class="basket__desc">
            <h2>Silverside Joint</h2>
            <p>1kg (serves 2-4)</p>
            <p>£6.77</p>
          </td>
          <td class="basket__qty">1</td>
          <td class="basket__price">
            <p><strong>£6.77</strong></p>
          </td>
        </tr>
        <tr>
          <td class="basket__image">
            <img src="http://via.placeholder.com/350x200" alt="ALT TEXT" />
          </td>
          <td class="basket__desc">
            <h2>Rack of Lamb</h2>
            <p>2 x 3-bone racks (170g/6oz)</p>
            <p>£12.99</p>
          </td>
          <td class="basket__qty">1</td>
          <td class="basket__price">
            <p><strong>£12.99</strong></p>
          </td>
        </tr>
      </tbody>
      <tfoot class="basket__foot">
        <tr>
          <td colspan="3">
            <p>Shipping</p>
          </td>
          <td>
            <p><strong>FREE</strong></p>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            <p>Total</p>
          </td>
          <td>
            <p><strong>£42.96</strong></p>
          </td>
        </tr>
      </tfoot>
    </table>

    <button class="btn btn--large">Checkout</button>
    <a href="#" class="btn btn--neutral btn--large">Update Basket</a>
  </form>
</div>

谁能发现我错过了什么？

我确实想在 tfoot 内联中添加 2 个单元格，但第一个单元格的文本向左对齐，最后一个/第二个单元格向右对齐。如果这有什么不同？

Answer 1

你有

text-align: right; 

在带有 colspan=3 的 td 继承的 .basket__foot 类上。将此添加到您的 css 文件的末尾，它将在左侧对齐。

.basket__foot p:first-child {
  text-align: left;
}

同时点击 ctrl-shift-i 并检查标签元素，当你将鼠标悬停在标签上时会看到元素尺寸