在我的表格中，我设置列中第一个单元格的宽度为100px。 但是，当此列中的某个单元格中的文本太长时，列的宽度就会超过100px。如何禁用此扩展?
当前回答
我所做的是:
设置td宽度: <td width="200" height="50"><!——blaBlaBla这里的内容——></td> . txt 使用CSS设置td宽度: < td风格= "宽度:200 px;高度:50 px;" > 用CSS再次设置宽度为max和min: < td风格= " max-width: 200 px;min-width: 200 px;max-height: 50 px;最小高度:50 px;宽度:200 px;高度:50 px;" >
这听起来有点重复，但它给了我想要的结果。为了更容易地实现这一点，你可能需要把CSS值放在样式表中的一个类中:
.td_size {
width:200px;
height:50px;
max-width:200px;
min-width:200px;
max-height:50px;
min-height:50px;
**overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/
}
然后:
<td class="td_size">
将class属性放置到任何<td>。
其他回答
我所做的是:
设置td宽度: <td width="200" height="50"><!——blaBlaBla这里的内容——></td> . txt 使用CSS设置td宽度: < td风格= "宽度:200 px;高度:50 px;" > 用CSS再次设置宽度为max和min: < td风格= " max-width: 200 px;min-width: 200 px;max-height: 50 px;最小高度:50 px;宽度:200 px;高度:50 px;" >
这听起来有点重复，但它给了我想要的结果。为了更容易地实现这一点，你可能需要把CSS值放在样式表中的一个类中:
.td_size {
width:200px;
height:50px;
max-width:200px;
min-width:200px;
max-height:50px;
min-height:50px;
**overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/
}
然后:
<td class="td_size">
将class属性放置到任何<td>。
如果您需要一个或多个固定宽度的列，而其他列需要调整大小，请尝试将min-width和max-width设置为相同的值。
如果不想要固定的布局，请指定一个类，使列的大小适当。
CSS:
.special_column { width: 120px; }
HTML:
<td class="special_column">...</td>
在餐桌上找到合适的尺寸是很棘手的。唯一对我有效的方法是使用表格布局:fixed;与每条线的指定宽度相结合。和宽度:auto;在你不介意生长的一列上。
下面是一个使用无类表的示例。如果您正在处理一些动态列，则需要一个类化版本。
table { table-layout: fixed; } th,td { text-align: left; vertical-align: top; /* use this in the columns where you're not concerned with new lines */ word-break: break-word; } th:first-child, th:last-child { width: 5ch; text-align: center; } th:nth-child(n + 2):nth-child(-n + 3) { background: red; width: 25%; } th:nt-child(4) { background: blue; width: auto; } <table> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Description</th> <th>Age</th> </tr> </thead> <tbody> <tr> <th>1</th> <th>John</th> <th>Smith</th> <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th> <th>30</th> </tr> <tr> <th>2</th> <th>John</th> <th>Smith</th> <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th> <th>30</th> </tr> <tr> <th>3</th> <th>John</th> <th>Smith</th> <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th> <th>30</th> </tr> <tr> <th>4</th> <th>John</th> <th>Smith</th> <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th> <th>30</th> </tr> </tbody> </table>
你不需要设置“fixed”-你只需要设置overflow:隐藏，因为列宽度已经设置好了。
