Question

什么是CSS（3） - 制作表的唯一方法，它具有流体，基于内容和固定宽度列的混合？真的不关心支持旧的浏览器，IE9 +就可以了。

+----------------------+------+---------------+------+----------------------+----------------------+
| Content width column | 50xp | <-- Fluid --> | 20px | Content width column | Content width column |
+----------------------+------+---------------+------+----------------------+----------------------+

流体柱应具有text-overflow: ellipsis属性。

或者它甚至不可能？什么是表的替代品？浮？

我遇到的问题是我需要指定“基于内容的列”的宽度，并且它应用宽度属性，该属性低于内容：http://plnkr.co/edit/rqrpb8oMFDDyogXSon6y?p=preview

Answer 1

为了将text-overflow: ellipsis应用于表格单元格，我必须在该单元格中明确指定它以及max-width: 0。

插件就在那里：http://plnkr.co/edit/rqrpb8oMFDDyogXSon6y

Answer 2

我会把它作为一个想法 - FIDDLE。

CSS

ul li {
    display: inline-block;
}
.content {
    height: 40px;
    border: 1px solid black;
}
.spacer50 {
    width: 50px;
    height: 40px;
    background-color: red;
}
.spacer20 {
    width: 20px;
    height: 40px;
    background-color: green;
}

.fluidme {
    width: 20%;
    height: 40px;
    border: 1px solid green;
}

CSS（3） - 具有混合宽度列的表的路径？

2 个答案: