홈>
웹 사이트에서 쇼핑 바구니에 사용중인 테이블이 있습니다. 그것은 모두 잘 작동하지만
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 개의 세포를 원합니다
인라인이지만 첫 번째 셀의 텍스트는 왼쪽에 정렬되고 마지막 두 번째 셀은 오른쪽에 정렬됩니다. 그것이 차이가 있다면?
- 답변 # 1
관련 자료
- html - 부트 스트랩 - 모바일보기에서 버튼을 텍스트 상자와 같은 너비로 만드는 방법은 무엇입니까?
- html - 표 안에 전체 너비 단락을 배치하는 방법
- html - 각 열의 너비에 영향을주지 않고 표의 너비를 어떻게 설정합니까?
- html - 휴대 전화에서 div의 너비를 조정하십시오
- javascript - HTML 테이블 및 열에 특정 너비를 제공하는 방법
- css - 열의 가장 큰 셀 너비에 따라 테이블의 첫 번째 열에 일정한 너비를 유지하십시오
- css - 테이블과 모든 내용을 HTML에서 부모 컨테이너의 정확한 너비와 높이를 만드는 방법은 무엇입니까?
- php - 모든 모바일 장치의 DIV 테이블 크기 조정
- html5 - DOM을 통해 JavaScript에서 테이블 헤더 셀의 너비를 얻는 방법은 무엇입니까?
관련 질문
- javascript : 매핑 된 테이블에서 행당 3 개의 이미지를 보장하는 방법은 무엇입니까?
- html : CSS 스크롤바가 요소 크기를 초과 함
- HTML 표에서 테두리를 완전히 제거하는 방법
- html 반응 형 결제 테이블 만들기
- html : CSS 그리드를 사용하여 테두리 축소
- html : 두 개의 인라인 블록 형제 div 중 하나에 대해 라인 높이를 설정하면 두 div 모두에 영향을 미치는 이유는 무엇입니까?
- html : 형제 요소가 쌓이는 것을 방지하는 방법은 무엇입니까?
- html 또는 css에서
- html : 동적 신체 높이 및 너비로 div를 수직 정렬
- html : 순수 CSS를 사용하여 div를 인 /아웃하는 방법이 있습니까?
귀하가
colspan = 3 인 td가 상속하는 .basket__foot 클래스의CSS 파일 끝에 이것을 추가하면 왼쪽에 정렬됩니다.
또한 ctrl-shift-i를 누르고 탭 요소를 확인하십시오. 태그 위에 마우스를 올리면 요소 크기가 표시됩니다