表格宽度确定后,要长度过长则首先需要固定表格 table-layout:fixed 所有浏览器都支持 table-layout 属性
也就是定位列宽由表格宽度和列宽度设定。需要了解具体可以参考w3cschool
接下来就要实现问题解决方法了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.table-default{
width:400px;
margin:10px;
border:1px solid #2d2d2d;
border-collapse:collapse;
}
.table-default tr{
height:32px;
line-height:32px;
}
.table-default tr td{
line-height:32px;
border:1px solid #2d2d2d;
border-collapse:collapse;
}
/*表内容超出。。。*/
.tabFixed{
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
.tabFixed td{
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis; /* for IE */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla,在chrome中测试也通过了*/
}
/*表格内容超出换行 设备管理*/
.tabBreak {
table-layout: fixed;
white-space: normal;
word-break: break-all;
}
.tabBreak tr td {
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
/*指定列表内容超出显示点点点*/
.tdFixed {
table-layout: fixed; /* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
.tdFixed td.tdContent {
width: 100%;
word-break: keep-all; /* 不换行 */
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis; /* for IE */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla,在chrome中测试也通过了*/
}
</style>
</head>
<body>
<table class="tabFixed table-default" cellpadding="0" cellspacing="0">
<tr>
<td width="100">噶进口德国康看风景你感觉是你们感觉</td>
<td width="200">噶进口德国康看风景你感觉是你们感觉击</td>
<td width="100">噶进口德国康看风景你感觉是你们感</td>
</tr>
<tr>
<td>噶进口德国康看风景你感觉是你们感觉到</td>
<td>噶进口德国康看风景你感觉是你们感</td>
<td>噶进口德国康看风景你感觉是你们感觉到你赶紧发那</td>
</tr>
</table>
<table class="tabBreak table-default " cellpadding="0" cellspacing="0">
<tr>
<td width="100">噶进口德国康看风景你感觉是你们感觉到你赶</td>
<td width="200">噶进口德国康看风景你感觉是你们感</td>
<td width="100">噶进口德国康看风景你感觉是你们感觉</td>
</tr>
<tr>
<td>噶进口德国康看风景你感觉</td>
<td>噶进口德国康看风景你感</td>
<td>噶进口德国康看风</td>
</tr>
</table>
<table class="table-default tdFixed" cellpadding="0" cellspacing="0">
<tr>
<td width="100" class="tdContent">噶进口德国康看风景你感觉是你们感</td>
<td width="200" class="tdContent">噶进口德国康看风景你感觉是你们</td>
<td width="100">噶进口德国康看风景你</td>
</tr>
<tr>
<td>噶进口德国康看风景</td>
<td>噶进口德国康</td>
<td>噶进口德国康看风</td>
</tr>
</table>
</body>
</html>
效果图: