html - 모바일의 테이블 행은 100 % 너비에 이르지 않습니다

웹 사이트에서 쇼핑 바구니에 사용중인 테이블이 있습니다. 그것은 모두 잘 작동하지만 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 개의 세포를 원합니다  인라인이지만 첫 번째 셀의 텍스트는 왼쪽에 정렬되고 마지막 두 번째 셀은 오른쪽에 정렬됩니다. 그것이 차이가 있다면?