Html 使显示表格单元格使用百分比宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15373147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make display table-cell use percentage width
提问by dezman
I've got this table feel going, using an unordered list. But I can't figure out how to get the table-cells to have 50% width (I want each row to be 100% width). The reason I am using display: table-row;and display: table-cell;is so that I can vertical-align the data if the parameter text is more than one line. I don't want to use an actual pixel or em value for the width, because, well, I just want it in percentage if its possible. I would rather give up the vertical-align. Please no javascript. Thanks!
使用无序列表，我感觉这张表可以正常运行。但我不知道如何让表格单元格具有 50% 的宽度（我希望每一行都是 100% 的宽度）。我使用display: table-row;and的原因display: table-cell;是，如果参数文本多于一行，我可以垂直对齐数据。我不想使用实际的像素或 em 值作为宽度，因为，如果可能的话，我只想要百分比。我宁愿放弃垂直对齐。请不要使用javascript。谢谢！
HTML:
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:
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;
}
回答by kpeatt
You're almost there. You just need to add display: tableand width: 100%to your ul.group2. You could probably also get away with not supplying a widthon your .group2 pelements.
您快到了。您只需要将display: table和添加width: 100%到您的ul.group2. 您可能也可以避免width在您的.group2 p元素上提供 a 。
This should work: http://jsfiddle.net/6Kn88/2/
这应该有效：http: //jsfiddle.net/6Kn88/2/
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 ul {
display: table;
width: 100%;
}
.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;
}<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>
<span class="clear"></span>
</div>回答by John
Set the ulto display: tablein accordance with the rest of your CSS, and give it a width of 100% to fill the parent div. Now your widths should take hold for your "rows" and "cells".
根据 CSS 的其余部分设置ulto display: table，并为其设置 100% 的宽度以填充父 div。现在您的宽度应该适用于您的“行”和“单元格”。
Edit: As per kpeatt, above, who was quicker off the mark!
编辑：根据上面的 kpeat，谁更快得离谱！
回答by yandong
I found the best way to set table-cell div 100% width from bootstrap source code.
我从引导源代码中找到了设置表格单元格 div 100% 宽度的最佳方法。
Set width:10000px, it rendered like 100% width.
Set width:10000px，它呈现为 100% 宽度。
回答by Stepan Rafael
Use the following:
使用以下内容：
display:table-cell;
width: 100vw;
回答by Raja Kota
For
为了
display: table-cell;
setting
环境
width:10000px;
acted as
作为
width:100%;
So, If you want 50% of width just use
所以，如果你想要 50% 的宽度，只需使用
width: 5000px;
