我使用无序列表让这张表感觉良好。但我无法弄清楚如何让表格单元格具有50%的宽度(我希望每一行都是100%宽度)。我使用display: table-row;
和display: table-cell;
的原因是,如果参数文本超过一行,我可以垂直对齐数据。我不想使用实际像素或em值作为宽度,因为,如果可能的话,我只想要百分比。我宁愿放弃垂直对齐。请不要javascript。谢谢!
HTML:
<div class="group group2">
<h2>Health Indicies</h2>
<ul>
<li><p class="parameter">GGP</p><p class="data">265</p></li>
<li><p class="parameter">Comfort</p><p class="data">blah</p></li>
<li><p class="parameter">Energy</p><p class="data">gooo</p></li>
</ul>
</div>
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
}
.group {
width: 50%;
margin-bottom: 20px;
outline: 1px solid black;
background: white;
box-shadow: 1px 1px 5px 0px gray;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.group h2 {
display: block;
font-size: 14px;
background: gray;
text-align: center;
padding: 5px;
}
.group li {
clear: both;
}
.group p {
padding: 3%;
text-align: center;
font-size: 14px;
}
.group2 li {
display: table-row;
}
.group2 p {
display: table-cell;
vertical-align: middle;
width: 46%;
border-bottom: 2px solid gray;
}
.group li:last-child p {
border-bottom: 0;
}
答案 0 :(得分:47)
你快到了。您只需将display: table
和width: 100%
添加到ul.group2
即可。您可能还可以在width
元素上没有提供.group2 p
。
答案 1 :(得分:9)
根据CSS的其余部分将ul
设置为display: table
,并将其宽度设置为100%以填充父div。现在你的宽度应该适用于你的“行”和“单元格”。
编辑:按照上面的kpeatt,谁更快离开了标记!
答案 2 :(得分:0)
我找到了从bootstrap源代码设置table-cell div 100%宽度的最佳方法。
设置width:10000px
,它呈现为100%宽度。
答案 3 :(得分:0)
使用以下内容:
display:table-cell;
width: 100vw;
答案 4 :(得分:-7)
对于
display: table-cell;
设置
width:10000px;
充当
width:100%;
所以,如果你想要50%的宽度,只需使用
width: 5000px;