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