在我的表格中,我设置列中第一个单元格的宽度为100px。 但是,当此列中的某个单元格中的文本太长时,列的宽度就会超过100px。如何禁用此扩展?
当前回答
你不需要设置“fixed”-你只需要设置overflow:隐藏,因为列宽度已经设置好了。
其他回答
我所做的是:
设置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>。
您需要在相应的CSS中编写这些内容
table-layout:fixed;
使接受的答案响应小屏幕时,小于固定宽度。
HTML:
<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
CSS
table{
border: 1px solid black;
table-layout: fixed;
max-width: 600px;
width: 100%;
}
th, td {
border: 1px solid black;
overflow: hidden;
max-width: 300px;
width: 100%;
}
JS小提琴
https://jsfiddle.net/w9s3ebzt/
看到的: http://www.html5-tutorials.org/tables/changing-column-width/
在table标记之后,使用col元素。不需要结束标记。
例如,如果你有三列:
<table>
<colgroup>
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
</colgroup>
<tbody>
...
</tbody>
</table>
你不需要设置“fixed”-你只需要设置overflow:隐藏,因为列宽度已经设置好了。
推荐文章
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 设备像素比到底是什么?
- 我如何做一个半透明的背景?
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在CSS网格布局中等高行
- $(window).width()与媒体查询不一样
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击
- 如何以及在哪里使用::ng-deep?
- Angular 2模板中的标签是什么意思?