how to add a table row that have different size and display compare to other row-CodePudding

in this excercise, i create a table with 5 row in tr and i put the last row (1 input and 2 button) in a div class btn. the display of last row is ok but i expect to have the table border wrap the last row as well (i dont set last row as tr and td cause it will change the size of the row above). the table border already wrap the 5 row above but i need it to also wrap around the last row and im not sure whether the last row need to be put in tr and td (because its content is different from other row). please someone give a solution

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  text-transform: capitalize;
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  font-size: 36px;
  text-transform: uppercase;
  margin-bottom: 55px;
  letter-spacing: 1px;
}

.flex, .quantity, .close_cell, .content {
  display: flex;
  align-items: center;
}

section {
  overflow-x: auto;
  border: 1px solid #dfe5e8;
}
section h2 {
  text-transform: capitalize;
  font-size: 24px;
  font-family: "Source Sans Pro", sans-serif;
  margin-bottom: 27px;
  font-weight: 300;
}
section h2 span {
  color: #00bcd4;
}
section table {
  border: 1px solid #dfe5e8;
  border-collapse: collapse;
}
section .detail .head {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  font-size: 16px;
  background: #b6c6c9;
}
section .detail .row {
  padding: 20px 0;
}
section .detail .row .close_btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  background: red;
  display: inline-block;
  text-align: center;
}
section .detail .row .close_btn:hover {
  cursor: pointer;
}
section .detail .row .square {
  display: inline-block;
  width: 62px;
  height: 62px;
  background: #99a9b5;
}
section .detail .row .square:hover {
  cursor: pointer;
}
section .detail .row .text {
  display: inline-block;
  text-transform: capitalize;
}
section .detail .row .text .blue {
  margin-left: 25px;
  color: #00bcd4;
}
section .detail .row .text .grey {
  margin-left: 18px;
  color: #cfd7dc;
  font-size: 14px;
}

.content {
  padding: 20px 0;
}

.product_col {
  width: 590px;
}

.close_cell {
  padding: 0 36px;
  justify-content: center;
}

.product {
  padding: 22px 0;
}

.quantity {
  width: 106px;
  border: 1px solid #dfe5e8;
}
.quantity span {
  color: #afb9be;
}

.minus,
.plus {
  width: 33px;
  height: 33px;
  background: #dfe5e8;
}
.minus:hover,
.plus:hover {
  cursor: pointer;
}

.item {
  width: 40px;
}

.price {
  font-size: 20px;
  color: #393d50;
}

.price_col {
  width: 160px;
}

.quantity_col {
  width: 202px;
}

.total {
  font-size: 24px;
  color: #393d50;
}

.total_col {
  width: 183px;
}

td,
th {
  text-align: left;
}

tr:nth-child(even) {
  background: #f0f3f2;
}

.btn {
  padding: 24px;
}
.btn input {
  width: 260px;
  height: 52px;
  text-transform: capitalize;
  padding: 0 24px;
  border: 1px solid #dfe5e8;
  background: #f5f7f6;
}
.btn input::placeholder {
  color: #adbac4;
}
.btn .apply {
  margin-left: 24px;
  width: 115px;
  height: 52px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #00bcd4;
  border: 2px solid #00bcd4;
  background: white;
  border-radius: 3px;
}
.btn .apply:hover {
  cursor: pointer;
  background: #00bcd4;
  color: white;
}
.btn .cart {
  margin-left: 327px;
  width: 190px;
  height: 52px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: white;
  background: #00bcd4;
  border-radius: 3px;
  border: 2px solid #00bcd4;
  text-align: center;
}
.btn .cart:hover {
  cursor: pointer;
  background: #3498db;
  border-color: #3498db;
}

.quantity div {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*# sourceMappingURL=price_table.css.map */

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;700&family=Source Sans Pro:wght@300;400&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/price_table.css" />
  </head>
  <body>
    <section>
      <h2>you have<span> 6 items </span>in your cart</h2>
      <table >
        <tr >
          <th ></th>
          <th ><span>product</span></th>
          <th ><span>price</span></th>
          <th ><span>quantity</span></th>
          <th><span>total</span></th>
        </tr>

        <tr >
          <td>
            <div ><span >x</span></div>
          </td>
          <td >
            <div >
              <span ></span>
              <p >
                <span >lorem ipsum dolor sit amet</span>
                <span >size: large, color: black</span>
              </p>
            </div>
          </td>
          <td >
            <div ><span>$35.99</span></div>
          </td>
          <td >
            <div >
              <div ><span> </span></div>
              <div ><span>1</span></div>
              <div ><span>-</span></div>
            </div>
          </td>
          <td ><span >$35.99</span></td>
        </tr>
        <tr >
          <td>
            <div ><span >x</span></div>
          </td>
          <td >
            <div >
              <span ></span>
              <p >
                <span >consectetur adipisicing</span>
              </p>
            </div>
          </td>
          <td >
            <div ><span>$1285.99</span></div>
          </td>
          <td >
            <div >
              <div ><span> </span></div>
              <div ><span>1</span></div>
              <div ><span>-</span></div>
            </div>
          </td>
          <td ><span >$1285.99</span></td>
        </tr>
        <tr >
          <td>
            <div ><span >x</span></div>
          </td>
          <td >
            <div >
              <span ></span>
              <p >
                <span >Elit sed do eiusmod</span>
                <span >size: large</span>
              </p>
            </div>
          </td>
          <td >
            <div ><span>$89.99</span></div>
          </td>
          <td >
            <div >
              <div ><span> </span></div>
              <div ><span>1</span></div>
              <div ><span>-</span></div>
            </div>
          </td>
          <td ><span >$89.99</span></td>
        </tr>
        <tr >
          <td>
            <div ><span >x</span></div>
          </td>
          <td >
            <div >
              <span ></span>
              <p >
                <span >tempor incididunt ut labore</span>
              </p>
            </div>
          </td>
          <td >
            <div ><span>$12.00</span></div>
          </td>
          <td >
            <div >
              <div ><span> </span></div>
              <div ><span>1</span></div>
              <div ><span>-</span></div>
            </div>
          </td>
          <td ><span >12.00</span></td>
        </tr>
        <tr >
          <td>
            <div ><span >x</span></div>
          </td>
          <td >
            <div >
              <span ></span>
              <p >
                <span >et dolore magna aliqua</span>
              </p>
            </div>
          </td>
          <td >
            <div ><span>$158.25</span></div>
          </td>
          <td >
            <div >
              <div ><span> </span></div>
              <div ><span>1</span></div>
              <div ><span>-</span></div>
            </div>
          </td>
          <td ><span >158.25</span></td>
        </tr>
      </table>
      <div >
        <input type="text" placeholder="enter coupon code here.." />
        <button >apply</button>
        <button >update cart</button>
      </div>
    
    </section>
  </body>
</html>

CodePudding user response：

put btn class inside table and set td colaspan="5" and set .btn to display:flex,

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  text-transform: capitalize;
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  font-size: 36px;
  text-transform: uppercase;
  margin-bottom: 55px;
  letter-spacing: 1px;
}

.flex, .quantity, .close_cell, .content {
  display: flex;
  align-items: center;
}

section {
  overflow-x: auto;
  border: 1px solid #dfe5e8;
}
section h2 {
  text-transform: capitalize;
  font-size: 24px;
  font-family: "Source Sans Pro", sans-serif;
  margin-bottom: 27px;
  font-weight: 300;
}
section h2 span {
  color: #00bcd4;
}
section table {
  border: 1px solid #dfe5e8;
  border-collapse: collapse;
}
section .detail .head {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  font-size: 16px;
  background: #b6c6c9;
}
section .detail .row {
  padding: 20px 0;
}
section .detail .row .close_btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  background: red;
  display: inline-block;
  text-align: center;
}
section .detail .row .close_btn:hover {
  cursor: pointer;
}
section .detail .row .square {
  display: inline-block;
  width: 62px;
  height: 62px;
  background: #99a9b5;
}
section .detail .row .square:hover {
  cursor: pointer;
}
section .detail .row .text {
  display: inline-block;
  text-transform: capitalize;
}
section .detail .row .text .blue {
  margin-left: 25px;
  color: #00bcd4;
}
section .detail .row .text .grey {
  margin-left: 18px;
  color: #cfd7dc;
  font-size: 14px;
}

.content {
  padding: 20px 0;
}

.product_col {
  width: 590px;
}

.close_cell {
  padding: 0 36px;
  justify-content: center;
}

.product {
  padding: 22px 0;
}

.quantity {
  width: 106px;
  border: 1px solid #dfe5e8;
}
.quantity span {
  color: #afb9be;
}

.minus,
.plus {
  width: 33px;
  height: 33px;
  background: #dfe5e8;
}
.minus:hover,
.plus:hover {
  cursor: pointer;
}

.item {
  width: 40px;
}

.price {
  font-size: 20px;
  color: #393d50;
}

.price_col {
  width: 160px;
}

.quantity_col {
  width: 202px;
}

.total {
  font-size: 24px;
  color: #393d50;
}

.total_col {
  width: 183px;
}

td,
th {
  text-align: left;
}

tr:nth-child(even) {
  background: #f0f3f2;
}

.btn {
  padding: 24px;
}
.btn input {
  width: 260px;
  height: 52px;
  text-transform: capitalize;
  padding: 0 24px;
  border: 1px solid #dfe5e8;
  background: #f5f7f6;
}
.btn input::placeholder {
  color: #adbac4;
}
.btn .apply {
  margin-left: 24px;
  width: 115px;
  height: 52px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #00bcd4;
  border: 2px solid #00bcd4;
  background: white;
  border-radius: 3px;
}
.btn .apply:hover {
  cursor: pointer;
  background: #00bcd4;
  color: white;
}
.btn .cart {
  margin-left: 327px;
  width: 190px;
  height: 52px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: white;
  background: #00bcd4;
  border-radius: 3px;
  border: 2px solid #00bcd4;
  text-align: center;
}
.btn .cart:hover {
  cursor: pointer;
  background: #3498db;
  border-color: #3498db;
}

.quantity div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn{
display:flex
}
/*# sourceMappingURL=price_table.css.map */

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;700&family=Source Sans Pro:wght@300;400&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/price_table.css" />
  </head>
  <body>
    <section>
      <h2>you have<span> 6 items </span>in your cart</h2>
      <table >
        <tr >
          <th ></th>
          <th ><span>product</span></th>
          <th ><span>price</span></th>
          <th ><span>quantity</span></th>
          <th><span>total</span></th>
        </tr>

        <tr >
          <td>
            <div ><span >x</span></div>
          </td>
          <td >
            <div >
              <span ></span>
              <p >
                <span >lorem ipsum dolor sit amet</span>
                <span >size: large, color: black</span>
              </p>
            </div>
          </td>
          <td >
            <div ><span>$35.99</span></div>
          </td>
          <td >
            <div >
              <div ><span> </span></div>
              <div ><span>1</span></div>
              <div ><span>-</span></div>
            </div>
          </td>
          <td ><span >$35.99</span></td>
        </tr>
        <tr >
          <td>
            <div ><span >x</span></div>
          </td>
          <td >
            <div >
              <span ></span>
              <p >
                <span >consectetur adipisicing</span>
              </p>
            </div>
          </td>
          <td >
            <div ><span>$1285.99</span></div>
          </td>
          <td >
            <div >
              <div ><span> </span></div>
              <div ><span>1</span></div>
              <div ><span>-</span></div>
            </div>
          </td>
          <td ><span >$1285.99</span></td>
        </tr>
        <tr >
          <td>
            <div ><span >x</span></div>
          </td>
          <td >
            <div >
              <span ></span>
              <p >
                <span >Elit sed do eiusmod</span>
                <span >size: large</span>
              </p>
            </div>
          </td>
          <td >
            <div ><span>$89.99</span></div>
          </td>
          <td >
            <div >
              <div ><span> </span></div>
              <div ><span>1</span></div>
              <div ><span>-</span></div>
            </div>
          </td>
          <td ><span >$89.99</span></td>
        </tr>
        <tr >
          <td>
            <div ><span >x</span></div>
          </td>
          <td >
            <div >
              <span ></span>
              <p >
                <span >tempor incididunt ut labore</span>
              </p>
            </div>
          </td>
          <td >
            <div ><span>$12.00</span></div>
          </td>
          <td >
            <div >
              <div ><span> </span></div>
              <div ><span>1</span></div>
              <div ><span>-</span></div>
            </div>
          </td>
          <td ><span >12.00</span></td>
        </tr>
        <tr >
          <td>
            <div ><span >x</span></div>
          </td>
          <td >
            <div >
              <span ></span>
              <p >
                <span >et dolore magna aliqua</span>
              </p>
            </div>
          </td>
          <td >
            <div ><span>$158.25</span></div>
          </td>
          <td >
            <div >
              <div ><span> </span></div>
              <div ><span>1</span></div>
              <div ><span>-</span></div>
            </div>
          </td>
          <td ><span >158.25</span></td>
        </tr>
        <tr>
        <td colspan="5">
         <div >
        <input type="text" placeholder="enter coupon code here.." />
        <button >apply</button>
        <button >update cart</button>
      </div>
        </td>
        </tr>
      </table>
     
    
    </section>
  </body>
</html>

CodePudding user response：

Here is my solution:

HTML part

In order to fix the (change the size of the row above) issue when adding a <tr> <td>, you can add colspan="5"

<tr>
  <td colspan="5">
    <div >
      <input type="text" placeholder="enter coupon code here.." />
      <button >apply</button>
      <button >update cart</button>
    </div>  
  </td>
</tr>

CSS part

To make your button responsive add display: flex to your .btn div and replace your .btn .cart to margin-left: auto

.btn {
  padding: 24px;
  display: flex;
}

.btn .cart {
  margin-left: auto;
 }