如何解决该行的单元格在表的所有单元格中使用flexbox样式垂直堆叠
我试图在行单元格中使用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样式(表格以适当的表格形式出现)。任何帮助/建议将不胜感激。预先感谢。
解决方法
尝试添加此内容,您还需要将表行作为flexbox:
.table tr { display:flex; flex-direction:row; width:100%; }
.table tr th,.table tr td { flex: 1; }
,
只需在div中添加一个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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。