html - 使 td 小于其内容？

Question

有没有办法使用纯 css 使表格单元格小于其内容，并且不改变 DOM？将 td 的宽度设置为小于其子项只会使其与我的子项一样大。我还尝试将 table-layout:fixed 添加到表中，但这没有任何区别。

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