css显示：表格不显示边框

发布于08月24日

<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’指定它--它可以工作.但是，如果我给它一个%--不会起作用.我try 了以下方法

.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 %
}

哪里出了问题，但我不知道哪里出了问题.请帮帮我！

<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>

css显示：表格不显示边框

推荐答案

Css相关问答推荐

Css扩展搜索栏，如何添加图标结束？

具有不同边框宽度和 colored颜色的边框半径，Safari渲染问题

你能混合固定/相对定位吗？

如何按列垂直对齐项目，但不在列内水平对齐

当您到达页面底部时，如何使页脚 div 将附加的 div 向上推

通过 CSS 中的媒体查询更改站点的页面大小

使元素在顶部和中心都有粘性

最多 2 行的 Flex 水平滚动

在 SVG 元素上方添加标签而不移动 SVG 元素

如何将 CSS 样式应用于 Quarto 输出

：required 或 [required] CSS Select 器

CSS 使文本扩展并保持居中与圆形扩展 div 的问题

找到第一个可滚动的父级

如何使多个 div 显示在一行中但仍保留宽度？

如何使用 Bootstrap 3 阻止按钮保持压抑状态

如何隐藏 Chrome 中 HTML5
元素上默认显示的箭头？

使用 CSS/HTML 更改悬停图像

IE划掉伪元素CSS？

CSS显示：表格列应该如何工作？

行高百分比不起作用