-1

am using div to create of a table but i can create but with title i wants to give my customized padding and margin for the title.And that stylle should be applicable to the inner content of the div.kindly find the below picture and code.I need it exactly like that but i dont know how to do that.

enter image description here 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
  .wrapper-border{
  border: 1px solid #e4e7eb;
  }
  </style>
</head>
<body>

<div class="container">
 
  <div class="row">
    <div class="col-sm-6 wrapper-border">
     <div class="row"  style="border-bottom:1px solid #e4e7eb;border-bottom: 1px solid #e4e7eb;
    margin-bottom: 20px;
    padding-left: 24px;
    padding-right: 24px;">
        <h5>TITLE</h5>
        </div>
        <div class="row" style="border-bottom:1px solid #e4e7eb; margin-bottom:20px">
        <div class="col-sm-12">
         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </p>
        </div>
       <div class="col-sm-6">
        <div class="row col-md-8  col-sm-12">
          Januvary - Friday 
        Monday - saturdauy
        </div>
        
      
       </div>
        <div class="col-sm-6">
         The purpose of lorem ipsum is to create a natural looking block
       </div>
     </div>
        <div class="row" style="border-bottom:1px solid #e4e7eb;border-bottom: 1px solid #e4e7eb;
    margin-bottom: 20px;
    padding-left: 24px;
    padding-right: 24px;">
        <div class="col-sm-12">
         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </p>
        </div>
       <div class="col-sm-6">
        <div class="row col-md-8  col-sm-12">
          Januvary - Friday 
        Monday - saturdauy
        </div>
        
      
       </div>
        <div class="col-sm-6">
         The purpose of lorem ipsum is to create a natural looking block
       </div>
     </div>
    </div>
    <div class="col-sm-6">
    
</div>
  </div>
</div>
    
</body>
</html>

Actual problem here as per the layout i can't able to modify the style including border-bottom.kindly help me to do that as per the layout i need to align it.

Sathish
  • 149
  • 2
  • 19

2 Answers2

1

.item + .item The ( + ) sign means the element after the element to which the style is applied

.section {
  border: 1px solid #000;
}
.section .section-header {
  border-bottom: 1px solid #000;
  padding: 24px;
}
.section .section-body {
  padding: 0 24px;
}
.section .section-body .item {
  padding: 24px;
}
.section .section-body .item + .item {
  border-top: 1px solid #000;
}
.other-items {
  display: flex;
  justify-content: space-around;
}
<div class="section">
  
  <div class="section-header">
    title header
  </div>
  
  <div class="section-body">
    <div class="item">
      <div class="other-items">
        <div class="other-item">one</div>
        <div class="other-item">two</div>
      </div>
    </div>
    
    <div class="item">
      <div class="other-items">
        <div class="other-item">one</div>
        <div class="other-item">two</div>
      </div>
    </div>
    
    <div class="item">
      <div class="other-items">
        <div class="other-item">one</div>
        <div class="other-item">two</div>
      </div>
    </div>
  </div>
  
</div>
Emy
  • 639
  • 4
  • 13
0

Below is the solution using Bootstrap 4. You can use colspan=n for your title. When n equals the number of columns in tr

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">

    <table class="table table-striped text-center">
      <thead>
        <tr>
          <th colspan="2">Title for my Table</th>

        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>

        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>

        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>
Sai Manoj
  • 3,809
  • 1
  • 14
  • 35
  • i need to use div instead of table..is it possible – Sathish Nov 19 '20 at 04:41
  • As per your comment above, I have implemented the same in Bootstrap 4 tables. Can you elaborate more like why do you want to use the only div? – Sai Manoj Nov 19 '20 at 04:45
  • If you want to use `div`, that's not bootstrap. You need to go with native `HTML & CSS`. You can use `css grid` or `css flex` layouts – Sai Manoj Nov 19 '20 at 04:47
  • We can build it using div instead of table.due to some performace and mostly i used table for sorting the cols.but am not here going to do any sorting – Sathish Nov 19 '20 at 04:48
  • Please check this solution for your better understanding https://stackoverflow.com/a/50389231/9380480 – Sai Manoj Nov 19 '20 at 04:49