我有一张 table ,用于网站上的购物篮。一切都很好,但是一旦我添加了 tfoot
,tbody
就不会跨越 100% 的容器宽度。
我很确定问题出在 tfoot
上,但我找不到原因。我认为这与 colspan
在移动设备上不起作用有关,因为我隐藏了 body 中的一个细胞(所以它是不均匀的)但那没有做任何事情。
这是我的例子: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 个单元格,但第一个单元格的文本向左对齐,最后一个/第二个单元格向右对齐。如果这有什么不同?
最佳答案
你有
text-align: right;
关于 colspan=3 的 td 继承的 .basket__foot 类。将其添加到您的 css 文件末尾,它将在左侧对齐。
.basket__foot p:first-child {
text-align: left;
}
同时按 ctrl-shift-i 并检查标签元素,当您将鼠标悬停在标签上时会看到元素尺寸
关于html - 移动设备上的表格行不跨越 100% 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49037507/