Question

这是我的代码：http://jsfiddle.net/spadez/Nz9pY/14/

如果它是真正的表而不是具有表属性的div，我试图获得每列之间的分界线？

我的研究告诉我要添加这些行，但它没有做任何事情：

.table   { display: table; border-collapse: collapse;}
.tablerow  { display: table-row; border: 1px solid #000;}
.tablecell { display: table-cell; }

Answer 1

添加CSS无法正常工作，因为您没有使用这些类的元素，您只需添加：

Demo Fiddle

border: 1px solid #000; 你的CSS #wrapper div

没有双重内部;边框，使用下面的CSS：

Demo Fiddle

#wrapper {
    display: table;
    table-layout: fixed;
    width:100%;
}
#wrapper div {
    display: table-cell;
    text-align: center;
    border: 1px solid #000;
    border-right: none;
}
#wrapper div:last-child {
    border-right: 1px solid #000;
}
#wrapper div:hover {
    background-color:red;
}
.lrg {
    display: block;
    font-size: 30px;
}

Answer 2

你是说这个？

#wrapper div {
   border: 1px solid #000;
}
#wrapper div:not(:first-child) {
   border-left: none; 
}

<强> jsFiddle

Answer 3

将border添加到您的css

#wrapper div {
    display: table-cell;
    text-align: center;
    border-right: 1px solid black;
}

FIDDLE

更新

要删除最后一个div上的边框，请改为使用以下内容：

#wrapper div:not(:last-child){      
    border-right: 1px solid black;
}

FIDDLE

Answer 4

将border-left元素提供给div元素中的#wrapper个元素，并border-right添加到last div。

DEMO

#wrapper div {
    display: table-cell;
    text-align: center;
    border-left:1px solid
}

#wrapper div:last-child{
    display: table-cell;
    text-align: center;
    border-right:1px solid
}

修改

如果您希望所有边框都可见

DEMO 2

#wrapper div { display: table-cell; text-align: center; border-left:1px solid; border-top:1px solid; border-bottom:1px solid } #wrapper div:last-child{ display: table-cell; text-align: center; border-right:1px solid }

获得div显示表有典型的分界线

4 个答案:

Demo Fiddle

Demo Fiddle