使td小于其内容？

有没有什么办法可以让表格单元比使用纯粹的css的内容更小，而且不会改变DOM？将td的宽度设置为小于其孩子的宽度只会使其与我的孩子一样大。我也尝试添加表格布局：固定到表格，但没有任何区别。使td小于其内容？

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/

来源

2013-02-25 Clox

也许设置显示：内联;为'div'？ – 2013-02-25 14:47:16

@Clox如果jomikr答案解决了您的问题，请接受此答案。 – QMaster 2014-05-10 17:06:16

是的，那是可能的。但是您必须改用max-width的值。所以，有这么一句话：

.mycell { 
    max-width: 20px; 
}

来源

2013-02-25 14:44:11 jokr

完美！谢谢！ – Clox 2013-02-25 14:46:05

但是，这意味着单元格的内容将溢出到下一个单元格。 – 2013-02-25 14:49:39

你可以用'.mycell {max-width：20px; overflow：hidden;}' – 2013-02-25 14:54:45

如果进行相关的内DIV位置绝对和outter 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; 
}

来源

2013-02-25 14:45:48

使td小于其内容？

回答

相关问题