html表格最⼩宽度,html–CSS’min-width’增加表格单元格的宽
度⼤于值
我觉得我错过了什么.我有⼀个< table>设置为宽度:100%;我添加CSS以防⽌列变得⽐50px窄.这是⼀个简单的场景.
我的问题是,即使宽度⼩于最⼩宽度值,应⽤最⼩宽度的列也会变宽.
问题⽰例:我应⽤min-width:50px;对于宽度为123px的td元素,td增加到167px的宽度.我期望应⽤最⼩宽度:50px;到渲染宽度为123px的元素,不更改元素宽度.
运⾏以下代码并执⾏以下步骤可以重现我的问题:
>检查表格第⼀列的宽度
>验证列的宽度是否⼤于50px
>如果第⼀列的宽度⼩于50px,请增加浏览器窗⼝的宽度.
>当第⼀列的显⽰宽度⼤于50像素时,单击表格下⽅的按钮.
>尽管不⼩于最⼩宽度值,但第⼀列的宽度应该增加.
注意:单击该按钮将切换应⽤于表格单元格(th和td元素)的类,这些类格式构成表格的第⼀列.该类适⽤于最⼩宽度:50px;.
任何不影响计算宽度⼤于50px且样式属性宽度:auto的表格单元格(th或td)的解决⽅案都将考虑解决此问题.设置最⼩宽度时:50px.
我使⽤的是⾕歌浏览器版本46.0.2490.80⽶.
任何帮助/见解将不胜感激.谢谢.
$("button").click(function() {
$("table tr > *:nth-child(1)").toggleClass("min-width-test")
});
table {
width: 100%;
}
table,table * {html表格元素
border: 1px solid black;
}
.min-width-test {
min-width: 50px;
}
First Second Third Fourth
1234
A B C D
Toggle min-width on first column