两个table对齐设定

2019独角兽企业重金招聘Python工程师标准>>>

最近在做一个画面改善，遇到一个这样的问题：

成果物是要使用<table>表现数据，当数据超过一定的高度时，让表的边上出现滚动条，表头不动，表身中的数据实行滚动操作。

实现是这样的，先定义一个<table>做表头，然后再定义一个<div>做滚动条，在<div>中定义一个<table>作为表身的数据显示。

<table>
 <tr>
  <th style="width:300px;">机能ID</th>
  <th style="width:300px;">机能名</th>
  <th style="width:300px;">内容</th>
 </tr>
</table>

<div style="width:926px;overflow:auto; height:100px;">
 <table >
  <tr>
   <td style="width:300px;">A0811D005</td>
   <td style="width:300px;">data</td>
   <td style="width:300px;">data</td>
  </tr>
 </table>
<div>

效果图：

现在的问题是这样的，表头和表身的两个<table>不对齐，只要数据有变化就会出现各种不对其的现象。

解决方法是将<table>的table-layout样式设置成fixed;，进行固定表格布局，它仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

table-layout样式默认的样式是auto;，列的宽度是由列单元格中没有折行的最宽的内容设定的。

<table>标签的css样式：

table
{
 table-layout:fixed;
}

这样不对齐的问题就可以解决了，至于如果数据长在单元格中显示不出来的话可以使用work-break:break-all;进行换行，或者通过写一个js，当内容超出单元格长度时，使用...代替剩余的内容，当鼠标指示到该内容时，显示浮动窗口将具体的值显示出来。

参考资料:

http://blog.sina.com.cn/s/blog_aaf979a001019e48.html

http://www.w3school.com.cn/css/pr_tab_table-layout.asp

http://www.pjhome.net/article.asp?id=506

以上。

转载于:https://my.oschina.net/wangbiglei/blog/137154