87,904
社区成员
发帖
与我相关
我的任务
分享table-layout:fixed;
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
table{
table-layout:fixed;
}
td{
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.STYLE1 {font-size: 18px}
-->
</style>
</head>
<body>
<table width="500" height="25" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF" id="aaa">
<tr>
<td colspan="10" align="center"><span class="STYLE1">标题</span></td>
</tr>
<tr>
<td width="50">sdfsdfdfsdfsdfdsfsdfsdf</td>
<td width="50">2</td>
<td width="50">3</td>
<td width="50">4</td>
<td width="50">5</td>
<td width="50">6</td>
<td width="50">7</td>
<td width="50">8</td>
<td width="50">9</td>
<td width="50">10</td>
</tr>
</table>
</body>
</html>
不能用javascript控制表格寬度
document.getElementById('aaa').rows[1].cells[1].width=100;
我想用javascript控制表格寬度，而且要文字隱藏超出的部份
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
table{
table-layout:fixed;
}
td{
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.STYLE1 {font-size: 18px}
-->
</style>
</head>
<body>
<table width="500" height="25" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF" id="aaa">
<tr>
<td colspan="10" align="center"><span class="STYLE1">标题</span></td>
</tr>
<tr>
<td width="50">sdfsdfdfsdfsdfdsfsdfsdf</td>
<td width="50">2</td>
<td width="50">3</td>
<td width="50">4</td>
<td width="50">5</td>
<td width="50">6</td>
<td width="50">7</td>
<td width="50">8</td>
<td width="50">9</td>
<td width="50">10</td>
</tr>
</table>
</body>
</html>
不能用javascript控制表格寬度
document.getElementById('aaa').rows[1].cells[1].width=100;
我想用javascript控制表格寬度，而且要文字隱藏超出的部份
...全文
请发表友善的回复…
发表回复
yhtapmys 2010-12-17
- 打赏
- 举报
--
var div=document.getElementById('aaa').rows[1].cells[1].style.width="100px";
Html 和JS 长宽数字后都加个 px 吧
var div=document.getElementById('aaa').rows[1].cells[1].style.width="100px";
Html 和JS 长宽数字后都加个 px 吧
孟子E章 2010-12-17
- 打赏
- 举报
参见
http://dotnet.aspx.cc/article/980e21d1-1d86-48a2-b263-090fac30e118/read.aspx
table-layout:fixed的表格修改只能对第一行有效
http://dotnet.aspx.cc/article/980e21d1-1d86-48a2-b263-090fac30e118/read.aspx
table-layout:fixed的表格修改只能对第一行有效
孟子E章 2010-12-17
- 打赏
- 举报
是可以改的 但需要写技巧
<!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>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
table{
table-layout:fixed;
}
td{
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.STYLE1 {font-size: 18px}
-->
</style>
</head>
<body>
<table width="500" height="25" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF" id="aaa">
<tr style="height:0;"> <!-- 非IE 使用 style="display:none 效果更好;"-->
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
</tr>
<tr>
<td colspan="10" align="center"><span class="STYLE1">标题</span></td>
</tr>
<tr>
<td>sdfsdfdfsdfsdfdsfsdfsdf</td>
<td>sdfsdfdfs dfsdfdsf sdfsdfsdfsdf dfsdfsdfdsfsdf sdfsdfsdfdfsdfs dfdsfsdfs dfsdfsdfdfsdfs dfdsfsdfsdf2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
<input type=button onclick="document.getElementById('aaa').rows[0].cells[1].setAttribute('width','100');" />
</body>
</html>
<!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>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
table{
table-layout:fixed;
}
td{
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.STYLE1 {font-size: 18px}
-->
</style>
</head>
<body>
<table width="500" height="25" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF" id="aaa">
<tr style="height:0;"> <!-- 非IE 使用 style="display:none 效果更好;"-->
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
<td width="50"></td>
</tr>
<tr>
<td colspan="10" align="center"><span class="STYLE1">标题</span></td>
</tr>
<tr>
<td>sdfsdfdfsdfsdfdsfsdfsdf</td>
<td>sdfsdfdfs dfsdfdsf sdfsdfsdfsdf dfsdfsdfdsfsdf sdfsdfsdfdfsdfs dfdsfsdfs dfsdfsdfdfsdfs dfdsfsdfsdf2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
<input type=button onclick="document.getElementById('aaa').rows[0].cells[1].setAttribute('width','100');" />
</body>
</html>
