<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’ – 它的工作。但是,如果我给它一个% – wont工作。我尝试以下
.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 % }
在某个地方发生错误,但我不能理解在哪里。请帮忙!
解决方法
你需要添加border-collapse:collapse;到.table类,它像这样工作:
<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>
原文地址:https://www.jb51.cc/css/222972.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。