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