使显示表格单元格使用百分比宽度

作者

拨弄

我用无序的列表让这张桌子感觉很好。但我不知道如何使表格单元格具有50%的宽度（我希望每行的宽度为100%）。我使用显示的原因：表行和显示：表格单元格是这样，如果参数文本不止一行，我可以垂直对齐数据。我不想使用实际像素或em值作为宽度，因为，如果可能的话，我只想要百分比。我宁愿放弃垂直对齐。请不要使用javascript。谢谢

HTML:

&lt；div class=“group group2”&gt；
&lt；h2&gt；健康指标&lt/h2&gt；
&lt；ul&gt；
&lt；李&gt&书信电报；p class=“参数”&gt；GGP&lt/p&gt&书信电报；p class=“数据”&gt；265&lt/p&gt&lt/李&gt；
&lt；李&gt&书信电报；p class=“参数”&gt；舒适&lt/p&gt&书信电报；p class=“数据”&gt；诸如此类&lt/p&gt&lt/李&gt；
&lt；李&gt&书信电报；p class=“参数”&gt；能源&lt/p&gt&书信电报；p class=“数据”&gt；古奥&lt/p&gt&lt/李&gt；
&lt/ul&gt；
&lt/部门&gt；

CSS:

ul{
保证金：0；
填充：0；
列表样式：无；
}
.组{
宽度：50%；
边缘底部：20px；
外形：1px纯黑；
背景：白色；
盒影：1px 1px 5px 0px灰色；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.h2组{
显示：块；
字体大小：14px；
背景：灰色；
文本对齐：居中；
填充物：5px；
}
李组{
明确：两者皆有；
}
.p组{
填充：3%；
文本对齐：居中；
字体大小：14px；
}
.2组李{
显示：表格行；
}
.2组p{
显示：表格单元格；
垂直对齐：中间对齐；
宽度：46%；
边框底部：2倍纯色灰色；
}
李组：最后一个孩子p{
边界底部：0；
}

你快到了。您只需将display:table和width:100%添加到ul.group2。您可能还可以在.group2p元素上不提供宽度

这应该起作用：http://jsfiddle.net/6Kn88/2/

ul{
保证金：0；
填充：0；
列表样式：无；
}
.组{
宽度：50%；
边缘底部：20px；
外形：1px纯黑；
背景：白色；
盒影：1px 1px 5px 0px灰色；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.h2组{
显示：块；
字体大小：14px；
背景：灰色；
文本对齐：居中；
填充物：5px；
}
李组{
明确：两者皆有；
}
.p组{
填充：3%；
文本对齐：居中；
字体大小：14px；
}
.第2组{
显示：表格；
宽度：100%；
}
.2组李{
显示：表格行；
}
.2组p{
显示：表格单元格；
垂直对齐：中间对齐；
宽度：46%；
边框底部：2倍纯色灰色；
}
李组：最后一个孩子p{
边界底部：0；
}
&lt；div class=“group group2”&gt；
&lt；h2&gt；健康指标&lt/h2&gt；
&lt；ul&gt；
&lt；李&gt&书信电报；p class=“参数”&gt；GGP&lt/p&gt&书信电报；p class=“数据”&gt；265&lt/p&gt&lt/李&gt；
&lt；李&gt&书信电报；p class=“参数”&gt；舒适&lt/p&gt&书信电报；p class=“数据”&gt；诸如此类&lt/p&gt&lt/李&gt；
&lt；李&gt&书信电报；p class=“参数”&gt；能源&lt/p&gt&书信电报；p class=“数据”&gt；古奥&lt/p&gt&lt/李&gt；
&lt/ul&gt；
&lt；span class=“清除”&gt&lt/span&gt；
&lt/部门&gt

相关文章：

  1. 如何使图元水平居中
  2. 使用CSS更改HTML5输入的占位符颜色
  3. 为什么HTML认为“chucknorris”是一种颜色？
  4. 在CSS中设置单元格填充和单元格间距？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with