'How to make the button left table more to the top in HTML?

enter image description here

I have this HTML Code which the tables are wrapped around Divs with bootstrap. The first 2 top tables are wrapped in a row, and the bottom are wrapped in another row. How can i make the "Sold By" Table more to the top to make it look a bit better.

The code is quite very long so i decided not to paste it, but if its needed please let me know below.

htmlcssbootstrap-4


Solution 1:[1]

To achieve this, I would not work with rows but take a container and assign it two columns (column-count: 2;). Then it should work.

#container {
  background-color: #aaa;
  margin: 0 auto;
  height: 500px;
  width: 500px;
  column-count: 2;
  gap: 10px;
  padding: 5px;
}

.box {  
  padding:10px;
  background-color: white;
  border: 1px solid black;
  width: 100%;  
  display: inline-block;
  box-sizing: border-box;
}

.box table {
  width: 100%;
}
<div id="container">
  <div class="box">
    <table border>
      <tr>
        <td>1</td>          
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>          
        <td>4</td>
      </tr>      
    </table>
  </div>
  <div class="box">
    <table border>
      <tr>
        <td>1</td>          
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>          
        <td>4</td>
      </tr> 
      <tr>
        <td>5</td>          
        <td>6</td>
      </tr>       
    </table>     
  </div>
  <div class="box">
    <table border>
      <tr>
        <td>1</td>          
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>          
        <td>4</td>
      </tr> 
      <tr>
        <td>5</td>          
        <td>6</td>
      </tr>       
    </table>    
  </div>
  <div class="box">
    <table border>
      <tr>
        <td>1</td>          
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>          
        <td>4</td>
      </tr>      
    </table> 
    
  </div>
</div>

Solution 2:[2]

Problaly the easiest way is to not have two rows but to have all four tables inside a column each and then all of those columns inside one row. By using col-6 you can ensure that you still end up with two tables next to each other and then two more below. It would look something like this...

<div class="row">
  <div class="col-6">
     Table 1 here
  </div>
   <div class="col-6">
     Table 2 here
  </div>
  <div class="col-6">
     Table 3 here
  </div>
  <div class="col-6">
     Table 4 here
  </div>
</div>

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 Maik Lowrey
Solution 2 Cutey from Cute Code

Related Questions