<!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/htmlcharset=gb2312" />
<title>无标题文档</title>
<style>
#table
{
width:300px
height:200px
}
#table td
{
width:100px
height:100px
background-color:Red
}
#table tr td:hover{
background-color:blue
}
</style>
</head>
<body>
<table id="table">
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>555</td>
<td>666</td>
</tr>
</table>
</body>
</html>
1、首先给table标签添加css : table-layout:fixed这里是为了让整个table有一个自己宽度，而不是让table自己随着自己内容的大小而改变。
2、给table标签，定一个宽度（如：width:500px）
3、最后给td 定一个宽度（width）就可以实现.
原表格：
添加一下CSS：
现表格：
扩展资料：
在实际需求中，经常遇到要在table中的td中，让用户输入比较长的字符串，这时就要使td的宽度能较大。
在WEB前端中，对于 表格元素中的元素td 直接设置宽度是无法生效的。要想达到给td设置宽度的目地。
你要查指定的class名是否正常，如：#abc .bcd table{}
如果你的table是第一层的话，就这样写：<table class='table'></table>
.table{}
又如：
<div class="div">
<ul class="ul">
<li class="li">
<table class='table'></table>
</li>
</ul>
</div>
class代码：.div .ul .li .table{}
