指定相同宽度的挠曲盒单元

Question

我在引导4框架内使用display构建一个表。

我的目标是创建一个表，其中第一列总是相同的，其他列将通过ajax调用进行大规模更新。这就是为什么我要保留两个外部列:一个列有固定列，另一个列包含其他列。这种方法有一个问题:右边的列没有相同的宽度。如何分配每个相同的宽度？，我想将正确的部分保留为行，因为我将在后端逐行获取数据以更新这个表。注意:我开始从这构建结构

​

.cell {
  border 1px solid black;
}

<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>

​

Answer 1

将justify-content-around类添加到每行

​

.cell {
  border 1px solid black;
}

<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>

​