table td 中定义了 width 但 overflow 不起作用的解决方法。
HtmlCode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> css table 超出隐藏 </title>
<style type="text/css">
table
{
width:100%;
table-layout : fixed ;
border-collapse:collapse;
}
td
{
white-space:nowrap;
overflow:auto;
}
</style>
</head>
<body>
<table style="width:200px;border:solid 1px #000;">
<tr><td>固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关</td></tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> css table 超出隐藏 </title>
<style type="text/css">
table
{
width:100%;
table-layout : fixed ;
border-collapse:collapse;
}
td
{
white-space:nowrap;
overflow:auto;
}
</style>
</head>
<body>
<table style="width:200px;border:solid 1px #000;">
<tr><td>固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关</td></tr>
</table>
</body>
</html>
关键在于 table{table-layout : fixed ; }
定义和用法
tableLayout 属性用来显示表格单元格、行、列的算法规则。
固定表格布局:
固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。
在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。
通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。
自动表格布局:
在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。
说明
该属性指定了完成表布局时所用的布局算法。固定布局算法比较快,但是不太灵活,而自动算法比较慢,不过更能反映传统的 HTML 表。
默认值: | auto |
---|---|
继承性: | yes |
版本: | CSS2 |
JavaScript 语法: | object.style.tableLayout="fixed" |
---0101-0101-01-0111-0110-110-10011-------
如果,人生可以编码 ……