在我的表格中，我设置列中第一个单元格的宽度为100px。 但是，当此列中的某个单元格中的文本太长时，列的宽度就会超过100px。如何禁用此扩展?
当前回答
如果不想要固定的布局，请指定一个类，使列的大小适当。
CSS:
.special_column { width: 120px; }
HTML:
<td class="special_column">...</td>
其他回答
设置:
style="min-width:100px;"
为我工作。
只需在<td>或<th>定义宽度<div>内添加<div>标签。 这对你有帮助。别的都不管用。
eg.
<td><div style="width: 50px" >...............</div></td>
我用了这个
.app_downloads_table tr td:first-child {
width: 75%;
}
.app_downloads_table tr td:last-child {
text-align: center;
}
如果不想要固定的布局，请指定一个类，使列的大小适当。
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>
