html - 在表格的所有单元格中使用 flexbox 样式垂直堆叠行的单元格
问题描述
我正在尝试在 Row 单元格中使用 flexbox,以便在单元格的两个极端显示单元格内的两个项目。里面的一项是文本,另一项是使用 span 元素创建的彩色点/正方形。只要它仅用于该行的一个单元格,就可以按预期显示,但是一旦将相同的样式应用于该行中的其他单元格,它们就会开始一个接一个地排列。
代码笔: 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>
代码笔: 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 样式(表格出现在适当的表格中)。任何帮助/建议将不胜感激。提前致谢。
解决方案
尝试添加这个,您还需要将表格行作为弹性框:
.table tr { display:flex; flex-direction:row; width:100%; }
.table tr th,
.table tr td { flex: 1; }
推荐阅读
- angular - 未捕获的 ReferenceError:未定义模块 Angular 6
- listview - 响应式列表查看产品列表
- azure - 如何从 Azure 服务总线事件处理程序访问 SignalR 连接
- c - 如何编写一个可以接受来自 CMD 行的参数的 makefile
- python - 未找到 Pip 命令。路径问题
- c - C - 转换为 IEEE 浮点时如何存储位
- coffeescript - if 语句为真但不进入块
- django - Webpack 仍然显示更改后的旧代码。如何重新加载 webpack?
- heroku - Bootstrap 4 `col-lg-4` 保持堆叠在自定义域上,但不在 Heroku 上
- python - /add_team/ 'dict' 对象的 TypeError 不可调用