Skip to content
Fix Code Error

assign flexbox cells the same width

July 14, 2021 by Code Error
Posted By: Anonymous

I am building a table using display flex inside bootstrap 4 framework.

My goal is to have a table where the first column will always be the same and the other columns will be updated massively with an ajax call. That’s why I am keeping two outer columns: one with the fixed column and one that contains the others. This approach has an issue: the columns on the right don’t have the same width. How do I assign each the same width? I want to keep the right part as rows since I will fetch the data row by row on the backend to update this table.
Note: I started to build the structure from this

_x000D_

_x000D_

.cell {
  border 1px solid black;
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="d-flex">
    <div class="d-flex flex-column">
      <div class="p-2 cell">Header</div>
      <div class="p-2 cell">101</div>
      <div class="p-2 cell">102</div>
      <div class="p-2 cell">103</div>
      <div class="p-2 cell">104</div>
      <div class="p-2 cell">105</div>
      <div class="p-2 cell">106</div>
      <div class="p-2 cell">107</div>
      <div class="p-2 cell">108</div>
    </div>
    <div class="d-flex flex-column">
      <div class="d-flex flex-row">
        <div class="p-2 cell">1</div>
        <div class="p-2 cell">2</div>
        <div class="p-2 cell">3</div>
        <div class="p-2 cell">4</div>
        <div class="p-2 cell">5</div>
        <div class="p-2 cell">6</div>
        <div class="p-2 cell">7</div>
        <div class="p-2 cell">8</div>
        <div class="p-2 cell">9</div>
        <div class="p-2 cell">10</div>
        <div class="p-2 cell">11</div>
        <div class="p-2 cell">12</div>
        <div class="p-2 cell">13</div>
        <div class="p-2 cell">14</div>
        <div class="p-2 cell">15</div>
      </div>
      <div class="d-flex flex-row">
        <div class="p-2 cell">101.1</div>
        <div class="p-2 cell">101.2</div>
        <div class="p-2 cell">101.3</div>
        <div class="p-2 cell">101.4</div>
        <div class="p-2 cell">101.5</div>
        <div class="p-2 cell">101.6</div>
        <div class="p-2 cell">101.7</div>
        <div class="p-2 cell">101.8</div>
        <div class="p-2 cell">101.9</div>
        <div class="p-2 cell">101.10</div>
        <div class="p-2 cell">101.11</div>
        <div class="p-2 cell">101.12</div>
        <div class="p-2 cell">101.13</div>
        <div class="p-2 cell">101.14</div>
        <div class="p-2 cell">101.15</div>
      </div>
      <div class="d-flex flex-row">
        <div class="p-2 cell">102.1</div>
        <div class="p-2 cell">102.2</div>
        <div class="p-2 cell">102.3</div>
        <div class="p-2 cell">102.4</div>
        <div class="p-2 cell">102.5</div>
        <div class="p-2 cell">102.6</div>
        <div class="p-2 cell">102.7</div>
        <div class="p-2 cell">102.8</div>
        <div class="p-2 cell">102.9</div>
        <div class="p-2 cell">102.10</div>
        <div class="p-2 cell">102.11</div>
        <div class="p-2 cell">102.12</div>
        <div class="p-2 cell">102.13</div>
        <div class="p-2 cell">102.14</div>
        <div class="p-2 cell">102.15</div>
      </div>
    </div>

  </div>
</div>

_x000D_

_x000D_

_x000D_

Solution

add justify-content-around class to each row

_x000D_

_x000D_

.cell {
  border 1px solid black;
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="d-flex">
    <div class="d-flex flex-column">
      <div class="p-2 cell">Header</div>
      <div class="p-2 cell">101</div>
      <div class="p-2 cell">102</div>
      <div class="p-2 cell">103</div>
      <div class="p-2 cell">104</div>
      <div class="p-2 cell">105</div>
      <div class="p-2 cell">106</div>
      <div class="p-2 cell">107</div>
      <div class="p-2 cell">108</div>
    </div>
    <div class="d-flex flex-column">
      <div class="d-flex flex-row justify-content-around">
        <div class="p-2 cell">1</div>
        <div class="p-2 cell">2</div>
        <div class="p-2 cell">3</div>
        <div class="p-2 cell">4</div>
        <div class="p-2 cell">5</div>
        <div class="p-2 cell">6</div>
        <div class="p-2 cell">7</div>
        <div class="p-2 cell">8</div>
        <div class="p-2 cell">9</div>
        <div class="p-2 cell">10</div>
        <div class="p-2 cell">11</div>
        <div class="p-2 cell">12</div>
        <div class="p-2 cell">13</div>
        <div class="p-2 cell">14</div>
        <div class="p-2 cell">15</div>
      </div>
      <div class="d-flex flex-row justify-content-around">
        <div class="p-2 cell">101.1</div>
        <div class="p-2 cell">101.2</div>
        <div class="p-2 cell">101.3</div>
        <div class="p-2 cell">101.4</div>
        <div class="p-2 cell">101.5</div>
        <div class="p-2 cell">101.6</div>
        <div class="p-2 cell">101.7</div>
        <div class="p-2 cell">101.8</div>
        <div class="p-2 cell">101.9</div>
        <div class="p-2 cell">101.10</div>
        <div class="p-2 cell">101.11</div>
        <div class="p-2 cell">101.12</div>
        <div class="p-2 cell">101.13</div>
        <div class="p-2 cell">101.14</div>
        <div class="p-2 cell">101.15</div>
      </div>
      <div class="d-flex flex-row justify-content-around">
        <div class="p-2 cell">102.1</div>
        <div class="p-2 cell">102.2</div>
        <div class="p-2 cell">102.3</div>
        <div class="p-2 cell">102.4</div>
        <div class="p-2 cell">102.5</div>
        <div class="p-2 cell">102.6</div>
        <div class="p-2 cell">102.7</div>
        <div class="p-2 cell">102.8</div>
        <div class="p-2 cell">102.9</div>
        <div class="p-2 cell">102.10</div>
        <div class="p-2 cell">102.11</div>
        <div class="p-2 cell">102.12</div>
        <div class="p-2 cell">102.13</div>
        <div class="p-2 cell">102.14</div>
        <div class="p-2 cell">102.15</div>
      </div>
    </div>

  </div>
</div>

_x000D_

_x000D_

_x000D_

Answered By: Anonymous

Related Articles

  • In CSS Flexbox, why are there no "justify-items" and…
  • Error 'Map', but got one of type 'Null' flutter web with…
  • Fix top buttons on scroll of list below
  • How do I keep only the first map and when the game is…
  • Chrome / Safari not filling 100% height of flex parent
  • Having trouble with my nav bar/header, It used to work but…
  • SQL query return data from multiple tables
  • Sort table rows In Bootstrap
  • Active tab issue on page load HTML
  • Vertical Align Center in Bootstrap 4

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Select distinct on joined table

Next Post:

Android – Moving to the main thread after a JsonObjectRequest

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error