最偷懒的办法是用title将就一下,如果非要图片中的效果可以写程序在td的onmouseover事件改变div位置和内容<!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>
</head><body>
<table width="520" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;" bordercolor="#CCCCCC">
  <tr>
    <td width="125" height="31" align="center" bgcolor="#CCCCCC">name</td>
    <td width="103" align="center" bgcolor="#CCCCCC">sex </td>
    <td width="93" align="center" bgcolor="#CCCCCC">age </td>
    <td width="189" align="center" bgcolor="#CCCCCC">address</td>
  </tr>
  <tr>
    <td height="26">张三</td>
    <td>男</td>
    <td>23</td>
    <td title="北京市黄浦路">北京</td>
  </tr>
  <tr>
    <td height="23">李司</td>
    <td>男</td>
    <td>22</td>
    <td title="天津市黄浦路">天津</td>
  </tr>
  <tr>
    <td height="27">王五</td>
    <td>男</td>
    <td>19</td>
    <td title="上海市黄浦路">上海</td>
  </tr>
  <tr>
    <td height="29">赵六</td>
    <td>男</td>
    <td>27</td>
    <td title="杭州市黄浦路">杭州</td>
  </tr>
</table>
</body>
</html>