在表格的所有单元格中使用 flexbox 样式垂直堆叠行的单元格答案

【问题标题】：Cells of the row stack vertically on using flexbox style in all cells of the table在表格的所有单元格中使用 flexbox 样式垂直堆叠行的单元格
【发布时间】：2020-08-28 12:25:20
【问题描述】：

我正在尝试在 Row 单元格中使用 flexbox，以便在单元格的两个极端显示单元格内的两个项目。里面的一项是文本，另一项是使用 span 元素创建的彩色点/正方形。只要它仅用于该行的一个单元格，就可以按预期显示，但是一旦将相同的样式应用于该行中的其他单元格，它们就会开始一个接一个地排列。

This is how it appears with flexbox style added to only one cell

Codepen：https://codepen.io/sandeep10au/pen/XWdRvLb

.table {
  width: 100%;
  margin-top: 1rem;
  color: #192038;
}

.table tr th {
  background-color: #FFF;
  border: 1px solid #DBDBDB;
  padding: 8px 16px;
  font-size: 1rem;
  line-height: 2rem;
}

.flexBox {
  display: flex;
  justify-content: space-between;
}

.dotRed {
  height: 15px;
  width: 15px;
  background-color: #ff3333;
  border-radius: 50%;
  display: inline-block;
}

.dotAmber {
  height: 15px;
  width: 15px;
  background-color: #ffd480;
  border-radius: 50%;
  display: inline-block;
}

.dotGreen {
  height: 15px;
  width: 15px;
  background-color: #5cd65c;
  border-radius: 50%;
  display: inline-block;
  align-self: center;
}

.squareRed {
  height: 15px;
  width: 15px;
  background-color: #ff3333;
  align-self: center;
  display: inline-block;
}

.squareAmber {
  height: 15px;
  width: 15px;
  background-color: #ffd480;
  align-self: center;
  display: inline-block;
}

.squareGreen {
  height: 15px;
  width: 15px;
  background-color: #5cd65c;
  align-self: center;
  display: inline-block;
}

<table class="table" style="width:100%;">
  <thead>
    <tr>
      <th class="flexBox">
        West Europe
        <span class="squareGreen" />
      </th>
      <th>
        North Europe
        <span class="squareRed" />
      </th>
      <th>
        East Europe
        <span class="squareAmber" />
      </th>
      <th>
        East US-2
        <span class="squareGreen" />
      </th>
    </tr>
  </thead>
  <tr>
    <td>
      IoT Hub
      <span class="dotGreen" />
    </td>
    <td>
      IoT Hub
      <span class="dotGreen" />
    </td>
    <td>
      IoT Hub
      <span class="dotGreen" />
    </td>
    <td>
      IoT Hub
      <span class="dotGreen" />
    </td>
  </tr>
  <tr>
    <td>
      TimeSeries Insights
      <span class="dotGreen" />
    </td>
    <td>
      TimeSeries Insights
      <span class="dotRed" />
    </td>
    <td>
      TimeSeries Insights
      <span class="dotGreen" />
    </td>
    <td>
      TimeSeries Insights
      <span class="dotGreen" />
    </td>
  </tr>
  <tr>
    <td>
      Service Bus
      <span class="dotGreen" />
    </td>
    <td>
      Service Bus
      <span class="dotGreen" />
    </td>
    <td>
      Service Bus
      <span class="dotAmber" />
    </td>
    <td>
      Service Bus
      <span class="dotGreen" />
    </td>
  </tr>
</table>

This is when the flexbox style is added to all cells in the row

Codepen：https://codepen.io/sandeep10au/pen/mdPmNNp

.table {
      width: 100%;
      margin-top: 1rem;
      color: #192038;
    }    

.table tr th{
        background-color: #FFF;
        border: 1px solid #DBDBDB;
        padding: 8px 16px;
        font-size: 1rem;
        line-height: 2rem;
    }

.flexBox{
  display: flex;
  justify-content: space-between;
}

.dotRed {
  height: 15px;
  width: 15px;
  background-color: #ff3333;
  border-radius: 50%;
  display: inline-block;
}

.dotAmber {
  height: 15px;
  width: 15px;
  background-color: #ffd480;
  border-radius: 50%;
  display: inline-block;
}

.dotGreen {
  height: 15px;
  width: 15px;
  background-color: #5cd65c;
  border-radius: 50%;
  display: inline-block;
  align-self: center;
}

.squareRed {
  height: 15px;
  width: 15px;
  background-color: #ff3333;
  align-self: center;
  display: inline-block;
}

.squareAmber {
  height: 15px;
  width: 15px;
  background-color: #ffd480;
  align-self: center;
  display: inline-block;
}

.squareGreen {
  height: 15px;
  width: 15px;
  background-color: #5cd65c;
  align-self: center;
  display: inline-block;
}

<table class="table" style="width:100%;">
    <thead>
        <tr>
            <th class="flexBox">
                West Europe
                <span class="squareGreen"/>
            </th>
            <th class="flexBox">
                North Europe
                <span class="squareRed"/>
            </th>
            <th class="flexBox">
                East Europe
                <span class="squareAmber"/>
            </th>
            <th class="flexBox">
                East US-2
                <span class="squareGreen"/>
            </th>
        </tr>
    </thead>
    <tr>
        <td>
            IoT Hub
            <span class="dotGreen"/>
        </td>
        <td>
            IoT Hub
            <span class="dotGreen"/>
        </td>
        <td>
            IoT Hub
            <span class="dotGreen"/>
        </td>
        <td>
            IoT Hub
            <span class="dotGreen"/>
        </td>
    </tr>
    <tr>
        <td>
            TimeSeries Insights
            <span class="dotGreen"/>
        </td>
        <td>
            TimeSeries Insights
            <span class="dotRed"/>
        </td>
        <td>
            TimeSeries Insights
            <span class="dotGreen"/>
        </td>
        <td>
            TimeSeries Insights
            <span class="dotGreen"/>
        </td>
    </tr>
    <tr>
        <td>
            Service Bus
            <span class="dotGreen"/>
        </td>
        <td>
            Service Bus
            <span class="dotGreen"/>
        </td>
        <td>
            Service Bus
            <span class="dotAmber"/>
        </td>
        <td>
            Service Bus
            <span class="dotGreen"/>
        </td>
    </tr>
</table>

我必须在表格的所有单元格中使用 flexbox 样式（表格出现在适当的表格中）。任何帮助/建议将不胜感激。提前致谢。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

尝试添加这个，您还需要将表格行作为弹性框：

.table tr { display:flex; flex-direction:row; width:100%; }
.table tr th,
.table tr td { flex: 1; }

【讨论】：

【解决方案2】：

只需在 th 中添加一个 div 即可。

.table {
      width: 100%;
      margin-top: 1rem;
      color: #192038;
    }    

.table tr th{
        background-color: #FFF;
        border: 1px solid #DBDBDB;
        padding: 8px 16px;
        font-size: 1rem;
        line-height: 2rem;
    }

.flexBox{
  display: flex;
  justify-content: space-between;
}

.dotRed {
  height: 15px;
  width: 15px;
  background-color: #ff3333;
  border-radius: 50%;
  display: inline-block;
}

.dotAmber {
  height: 15px;
  width: 15px;
  background-color: #ffd480;
  border-radius: 50%;
  display: inline-block;
}

.dotGreen {
  height: 15px;
  width: 15px;
  background-color: #5cd65c;
  border-radius: 50%;
  display: inline-block;
  align-self: center;
}

.squareRed {
  height: 15px;
  width: 15px;
  background-color: #ff3333;
  align-self: center;
  display: inline-block;
}

.squareAmber {
  height: 15px;
  width: 15px;
  background-color: #ffd480;
  align-self: center;
  display: inline-block;
}

.squareGreen {
  height: 15px;
  width: 15px;
  background-color: #5cd65c;
  align-self: center;
  display: inline-block;
}

<table class="table" style="width: 100%">
  <thead>
    <tr>
      <th>
        <div class="flexBox">
          West Europe
          <span class="squareGreen" />
        </div>
      </th>
      <th>
        <div class="flexBox">
          North Europe
          <span class="squareRed" />
        </div>
      </th>

      <th>
        <div class="flexBox">
          East Europe
          <span class="squareAmber" />
        </div>
      </th>

      <th>
        <div class="flexBox">
          East US-2
          <span class="squareGreen" />
        </div>
      </th>
    </tr>
  </thead>
  <tr>
    <td>
      IoT Hub
      <span class="dotGreen" />
    </td>
    <td>
      IoT Hub
      <span class="dotGreen" />
    </td>
    <td>
      IoT Hub
      <span class="dotGreen" />
    </td>
    <td>
      IoT Hub
      <span class="dotGreen" />
    </td>
  </tr>
  <tr>
    <td>
      TimeSeries Insights
      <span class="dotGreen" />
    </td>
    <td>
      TimeSeries Insights
      <span class="dotRed" />
    </td>
    <td>
      TimeSeries Insights
      <span class="dotGreen" />
    </td>
    <td>
      TimeSeries Insights
      <span class="dotGreen" />
    </td>
  </tr>
  <tr>
    <td>
      Service Bus
      <span class="dotGreen" />
    </td>
    <td>
      Service Bus
      <span class="dotGreen" />
    </td>
    <td>
      Service Bus
      <span class="dotAmber" />
    </td>
    <td>
      Service Bus
      <span class="dotGreen" />
    </td>
  </tr>
</table>

【讨论】：