Question

晚安stackoverflow社区！

我正在尝试使用CSS创建一个类似于表的模型，但很难搞清楚。这是一个包含文本的表格，每行都有一些图像，我尝试了 display：table 属性，但在创建行和单元格方面却没有成功。我想要做的是如下：

Simple to make on paint, sweating to turn CSS

我试图应用我创建的这个css至少使它成为一个表但没有成功。我还有什么要放进我的CSS吗？我真的不想使用表格。

#tabelona {
display: table;
}

#linha {
display: table-row;
}

#conteudo {
display: table-cell;
}

这是HTML部分，我只是先使用文字：

    <div id="tabelona">
        <div id="linha">
            <div id="conteudo">1.</div>
            <div id="conteudo">OK</div>
        </div>
    <div id="linha">
        <div id="conteudo">2.</div>
        <div id="conteudo">OK Too</div>
    </div>
</div>

非常感谢！

Answer 1

这样的事情对我来说很好：

<html>
<head>
    <style type="text/css">
        #table {
            display: table;
            margin:auto;
            border-collapse: separate;
            /* Only works if border-collapse is separate */
            border-spacing: 0 2px;
        }
        .row {
            display: table-row;
        }
        .cell {
            display: table-cell;
            border:1px solid black;
            width:100px;
            padding: 10px;
        }
        /* remove some cell border to stick to your example */
        .cell:first-child {
            border-right:0 solid black;
        }
        .cell:last-child {
            border-left:0 solid black;
        }
    </style>
</head>
<body>
    <div id="table">
            <div class="row">
                <div class="cell">1.</div>
                <div class="cell">OK</div>
            </div>
        <div class="row">
            <div class="cell">2.</div>
            <div class="cell">OK Too</div>
        </div>
    </div>
</body>
</html>

CSS - 表模式如何正确显示？

1 个答案: