'Is it possible to use bootstrap to make table rows (of a DataTable) look separate with spacing between them?

Is it possible to make table rows look separate like the image below? I'm using DataTables and bootstrap 5.

I want to make these "separate" rows (background is visible in between rows).

enter image description here

htmlcssdatatablesbootstrap-5


Solution 1:[1]

You can use padding to separate your elements in a table. Here's an example: How do you specify table padding in CSS? ( table, not cell padding )

You can also not use a datatable for a list of product, You have an example here:

body{
  margin:0;padding:0;
  
}
.table{
background-color:  #3f4a6c;
  height:100vh;
  width:100vw;
  flex-direction:column;
  display: flex;
  justify-content:center;
  align-items: center;
}
.table .product{
  min-width: 150px;
  overflow:hidden;
  border: 1px solid #969aaa;
  background-color:#ffffff;
  border-radius: 10px;
  display:flex;
  align-items:center;
  margin-bottom:10px;
}

.product img{
  padding:5px;
}
.product span {
  min-width:200px;
  margin-left: 20px;
}
.product.active span{
  color:#7e7edd;
  font-weight:bold;
}

.product .more{
  width:70px;
  display:flex;
  justify-content:center;
margin-left:20px;
  height:100%;
box-shadow:  -12px 0px 10px 0px #f2f2f2;
}
<html>
  <body>
    <div class="table">
      <div class="product active">
        <img src="https://via.placeholder.com/40"/>
        <span >Lorem ipsum</span>
          <div class="more"><img src="https://via.placeholder.com/15"/></div>
      </div>
       <div class="product">
        <img src="https://via.placeholder.com/40"/>
        <span>Lorem ipsum</span>
         <div class="more"><img src="https://via.placeholder.com/15"/></div>
      </div>
       <div class="product">
        <img src="https://via.placeholder.com/40"/>
        <span>Lorem ipsum</span>
        <div class="more"><img src="https://via.placeholder.com/15"/></div>
      </div>
    </div>
    
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sozary

Related Questions