Question

有没有办法使用纯粹的css使表格单元格小于其内容，并且不改变DOM？将td的宽度设置为小于其子项仅使其与我的子项一样大。我也尝试添加table-layout：固定在表格中，但没有任何区别。

HTML：

<table>
<tr>
    <td><div/></td>
    <td class="mycell"><div/></td>
    <td><div/></td>
</tr>

CSS：

table {
    table-layout:fixed;
}
td {
    border:3px solid black;
}
div {
    border:3px solid red;
    width:50px;
    height:50px;
}
.mycell {
 width:20px;

的jsfiddle：

http://jsfiddle.net/clox/EzKNy/

Answer 1

是的，这是可能的。但您必须使用值max-width。所以它写着：

.mycell {
    max-width: 20px;
}

Answer 2

如果你使内部div位置绝对和外部td位置相对，它将使内部div脱离正常流量。

http://jsfiddle.net/EzKNy/2/

td {
    border:3px solid black;
    position:relative;
}
div {
    border:3px solid red;
    width:50px;
    height:50px;
    position:absolute;
}

使td小于其内容？

2 个答案: