如何限制表<td>
条目以扩展整个屏幕
条目太长了?
答案 0 :(得分:51)
好吧,CSS中有max-width
,max-height
和overflow
。
所以
td.whatever
{
max-width: 150px;
max-height: 150px;
overflow: hidden;
}
会将最大宽度和高度限制为150px,并且它可以是从小于150到150的任何内容,任何不适合内部的东西都会被剪掉并隐藏在视图之外。
溢出的默认值(overflow: visible;
)只是允许任何不适合其指定容器内的东西溢出它。如果您只想横向限制它并且不想隐藏任何内容,word-wrap
可能有所帮助:
td.whatever
{
max-width: 150px;
word-wrap: break-word;
}
word-wrap
会在需要时断言,即使它不在单词的末尾。如果您不希望表扩展或缩小,也可以使用height
和width
指定固定大小。
答案 1 :(得分:17)
你可以使用word-wrap:break-word;
,所以过长的单词会被包裹。
答案 2 :(得分:6)
td.whatever_class{
max-width: 100px;
}
用你想要的宽度替换100px。 1000px对于网站来说是一个很好的宽度,因为它适用于人们现在拥有的几乎所有显示器,所以如果你有20列,那么例如50px。
答案 3 :(得分:2)
您需要同时指定max-width
和display
样式(因为显示属性设置为有趣,因为它是td,而不是普通元素),例如。
td{
max-width: 100px;
display: inline-block;
}
答案 4 :(得分:1)
还有一个很好的解决方案,属性max-width:0px;所以它将负责表的全宽。