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

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 class="detail">
        <tr class="head">
          <th class="first_col"></th>
          <th class="product"><span>product</span></th>
          <th class="price_head"><span>price</span></th>
          <th class="quantity_head"><span>quantity</span></th>
          <th><span>total</span></th>
        </tr>

        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">lorem ipsum dolor sit amet</span>
                <span class="grey">size: large, color: black</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$35.99</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">$35.99</span></td>
        </tr>
        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">consectetur adipisicing</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$1285.99</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">$1285.99</span></td>
        </tr>
        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">Elit sed do eiusmod</span>
                <span class="grey">size: large</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$89.99</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">$89.99</span></td>
        </tr>
        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">tempor incididunt ut labore</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$12.00</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">12.00</span></td>
        </tr>
        <tr class="row">
          <td>
            <div class="close_cell"><span class="close_btn">x</span></div>
          </td>
          <td class="product_col">
            <div class="content">
              <span class="square"></span>
              <p class="text">
                <span class="blue">et dolore magna aliqua</span>
              </p>
            </div>
          </td>
          <td class="price_col">
            <div class="price"><span>$158.25</span></div>
          </td>
          <td class="quantity_col">
            <div class="quantity">
              <div class="minus"><span>+</span></div>
              <div class="item"><span>1</span></div>
              <div class="plus"><span>-</span></div>
            </div>
          </td>
          <td class="total_col"><span class="total">158.25</span></td>
        </tr>
      </table>
      <div class="btn">
        <input type="text" placeholder="enter coupon code here.." />
        <button class="apply">apply</button>
        <button class="cart">update cart</button>
      </div>
    
    </section>
  </body>
</html>

2 answers

  • answered 2022-05-07 09:34 rootShiv

    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 class="detail">
            <tr class="head">
              <th class="first_col"></th>
              <th class="product"><span>product</span></th>
              <th class="price_head"><span>price</span></th>
              <th class="quantity_head"><span>quantity</span></th>
              <th><span>total</span></th>
            </tr>
    
            <tr class="row">
              <td>
                <div class="close_cell"><span class="close_btn">x</span></div>
              </td>
              <td class="product_col">
                <div class="content">
                  <span class="square"></span>
                  <p class="text">
                    <span class="blue">lorem ipsum dolor sit amet</span>
                    <span class="grey">size: large, color: black</span>
                  </p>
                </div>
              </td>
              <td class="price_col">
                <div class="price"><span>$35.99</span></div>
              </td>
              <td class="quantity_col">
                <div class="quantity">
                  <div class="minus"><span>+</span></div>
                  <div class="item"><span>1</span></div>
                  <div class="plus"><span>-</span></div>
                </div>
              </td>
              <td class="total_col"><span class="total">$35.99</span></td>
            </tr>
            <tr class="row">
              <td>
                <div class="close_cell"><span class="close_btn">x</span></div>
              </td>
              <td class="product_col">
                <div class="content">
                  <span class="square"></span>
                  <p class="text">
                    <span class="blue">consectetur adipisicing</span>
                  </p>
                </div>
              </td>
              <td class="price_col">
                <div class="price"><span>$1285.99</span></div>
              </td>
              <td class="quantity_col">
                <div class="quantity">
                  <div class="minus"><span>+</span></div>
                  <div class="item"><span>1</span></div>
                  <div class="plus"><span>-</span></div>
                </div>
              </td>
              <td class="total_col"><span class="total">$1285.99</span></td>
            </tr>
            <tr class="row">
              <td>
                <div class="close_cell"><span class="close_btn">x</span></div>
              </td>
              <td class="product_col">
                <div class="content">
                  <span class="square"></span>
                  <p class="text">
                    <span class="blue">Elit sed do eiusmod</span>
                    <span class="grey">size: large</span>
                  </p>
                </div>
              </td>
              <td class="price_col">
                <div class="price"><span>$89.99</span></div>
              </td>
              <td class="quantity_col">
                <div class="quantity">
                  <div class="minus"><span>+</span></div>
                  <div class="item"><span>1</span></div>
                  <div class="plus"><span>-</span></div>
                </div>
              </td>
              <td class="total_col"><span class="total">$89.99</span></td>
            </tr>
            <tr class="row">
              <td>
                <div class="close_cell"><span class="close_btn">x</span></div>
              </td>
              <td class="product_col">
                <div class="content">
                  <span class="square"></span>
                  <p class="text">
                    <span class="blue">tempor incididunt ut labore</span>
                  </p>
                </div>
              </td>
              <td class="price_col">
                <div class="price"><span>$12.00</span></div>
              </td>
              <td class="quantity_col">
                <div class="quantity">
                  <div class="minus"><span>+</span></div>
                  <div class="item"><span>1</span></div>
                  <div class="plus"><span>-</span></div>
                </div>
              </td>
              <td class="total_col"><span class="total">12.00</span></td>
            </tr>
            <tr class="row">
              <td>
                <div class="close_cell"><span class="close_btn">x</span></div>
              </td>
              <td class="product_col">
                <div class="content">
                  <span class="square"></span>
                  <p class="text">
                    <span class="blue">et dolore magna aliqua</span>
                  </p>
                </div>
              </td>
              <td class="price_col">
                <div class="price"><span>$158.25</span></div>
              </td>
              <td class="quantity_col">
                <div class="quantity">
                  <div class="minus"><span>+</span></div>
                  <div class="item"><span>1</span></div>
                  <div class="plus"><span>-</span></div>
                </div>
              </td>
              <td class="total_col"><span class="total">158.25</span></td>
            </tr>
            <tr>
            <td colspan="5">
             <div class="btn">
            <input type="text" placeholder="enter coupon code here.." />
            <button class="apply">apply</button>
            <button class="cart">update cart</button>
          </div>
            </td>
            </tr>
          </table>
         
        
        </section>
      </body>
    </html>

  • answered 2022-05-07 09:35 Mohamed Ghulam

    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 class="btn">
          <input type="text" placeholder="enter coupon code here.." />
          <button class="apply">apply</button>
          <button class="cart">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;
     }
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum