3 글 보임 - 1 에서 3 까지 (총 3 중에서)
-
tfoot을 전체를 합병하려고 했는데,
맨 처음칸에만 생기고 나머지 칸에는 생기지않아서 병합을 해봤자 img파일 밑에만 들어가게 됩니다
한 줄 전체를 합병하려면 어떻게 해야할까요??
그리고 버튼이 가운데 정렬되어있는데 어디서부터 상속된건지 모르겠고 지정하는건 따로 안먹히는데 어떻게 처리해보면 될까요?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="/css/resource/normalize.css" /> <link rel="stylesheet" href="/css/06.table.css" /> </head> <body> <div class="con"> <h3 class="cart1">Your shopping cart</h3> <table class="tb1"> <thead> <tr class="thd"> <th></th> <th>ITEM</th> <th>AMOUNT</th> <th>PRICE</th> <th>TOTAL</th> </tr> </thead>
<tbody> <tr> <td>< img src="#" alt="img1" /></td> <td> <h4>SONY</h4> <p>FE 70-200mm F2.8 GM OSS</p> </td> <td>1</td> <td>$ 1979.00</td> <td>$ 1979.00</td> </tr> <tr> <td>< img src="#" alt="img2" /></td> <td> <h4>SONY</h4> <p>Sonnar T* E 24mm F1.8 ZA</p> </td> <td>1</td> <td>$ 989.00</td> <td>$ 989.00</td> </tr> </tbody>
<tfoot> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td>
</tr> <td class="total" colspan="5" style="text-align: right">$ 2968.00</td> </tfoot> </table>
<p class="editlink">Edit your shopping cart</p> <button class="payment">Choose payment method</button> </div> </body> </html>
-----------
.con { max-width: 800px; width: 80%; margin: auto; padding: 30px 70px; background-color: rgb(187, 210, 218); position: relative; } .cart1 { margin: 30px 40px; font-weight: 500; font-size: 22px; color: navy; line-height: 1; } thead th, tbody td, tfoot tr { border: 1px solid tomato; padding: 15px; border-bottom: 2px solid #c2d3de; } .tb1 { border-collapse: collapse; margin: auto; padding: 15px; border-radius: 10px; background-color: white; } .total { display: block; right: 0; } tfoot { display: flex; border: 1px solid red;} .editlink { margin: 10px 40px; font-size: 12px; display: inline-block; left: 0; } .payment { margin: 10px ; border-radius: 10px; background-color: navy; color: white; font-size: 13px; width: 40%; display: inline-block; padding: 20px 30px; }
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
- 답변은 로그인 후 가능합니다.