css显示:表格不显示边框
css显示:表格不显示边框
提问于 2011-08-24 20:00:03
<html>
<style type="text/css">
.table { display: table;}
.tablerow { display: table-row; border:1px solid black;}
.tablecell { display: table-cell; }
</style>
<div class="table">
<div class="tablerow">
<div class="tablecell">Hello</div>
<div class="tablecell">world</div>
</div>
<div class="tablerow">
<div class="tablecell">foo</div>
<div class="tablecell">bar</div>
</div>
</div>
</html>根据我的理解，应该在我通过tablerow类指定的每一行上绘制一个黑色边框。但是边界并没有出现。
我想改变一排的高度。如果我用'px‘指定它--它可以工作。但是，如果我给它一个% --将不起作用。我尝试了以下方法
.tablerow {
display: table-row;
border:1px solid black;
position: relative; //not affecting anything and the border disappears!!
//position: absolute; // if this is set,the rows overlaps and the border works
height: 40%; // works only if specified in px and not in %
}哪里出了问题，但我不知道是哪里出了问题。请帮帮我！
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-08-24 20:18:15
您需要在.table类中添加border-collapse: collapse;，它的工作方式如下所示：
<html>
<style type="text/css">
.table { display: table; border-collapse: collapse;}
.tablerow { display: table-row; border: 1px solid #000;}
.tablecell { display: table-cell; }
</style>
<div class="table">
<div class="tablerow">
<div class="tablecell">Hello</div>
<div class="tablecell">world</div>
</div>
<div class="tablerow">
<div class="tablecell">foo</div>
<div class="tablecell">bar</div>
</div>
</div>
</html>Stack Overflow用户
发布于 2011-08-24 20:17:48
表行不能有边框属性。通过为所有单元格提供上边框和下边框，并分别为最左侧和最右侧的单元格添加具有左边界和右边界的类，可以在每行周围获得边框。
编辑:我忘记了border-collapse:collapse。这也是可行的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7175049
复制相关文章
相似问题