Question

我需要用easyui做一个页面，中间有tabs嵌套了tabs，他的效果图如下：

怎么让datagrid的表头与下面的表格对齐，短信接触页面的源代码如下：
<div id="message_touch_tabs" class="easyui-tabs" data-options="fit:true,plain:true">
<div title="上行短信" data-options="closable:false,cache:false" fit='true'>
<table class="easyui-datagrid" fit='true' style="text-align:center"
data-options="rownumbers:true,singleSelect:true,url:'../data/message_touchInfo_data_001 .json',
border:false,pagination:true" id='message_table_01'>
<thead>
<tr>
<th data-options="field:'telephone_number',fit:true">手机号码</th>
<th data-options="field:'content_number',fit:true">内容编码</th>
<th data-options="field:'message_content',fit:true">短信内容</th>
<th data-options="field:'back_code',fit:true">返回码</th>
<th data-options="field:'accept_time',fit:true">接受时间</th>
</tr>
</thead>
</table>
</div>
<div title="下行短信" data-options="closable:false,cache:false" fit='true'>
<table class="easyui-datagrid" fit='true' style="text-align:center"
data-options="rownumbers:true,singleSelect:true,url:'../data/message_touchInfo_data_002.json',
border:false,pagination:true" id='message_table_02'>
<thead>
<tr>
<th data-options="field:'activity_id',fit:true">活动编号</th>
<th data-options="field:'under_telephone_number',fit:true">手机号码</th>
<th data-options="field:'send_status',fit:true">发送状态</th>
<th data-options="field:'send_time',fit:true">发送时间</th>
<th data-options="field:'send_content',fit:true">发送内容</th>
</tr>
</thead>
</table>
</div>
</div>

Answer 1

css没有加载造成的，tab加载网页时只加载body标签里面的 所以你页面head的css link没有加载出现排版乱的问题 你可以吧css加载在你的tabs原始页面试试看

Answer 2

你漏了一个属性 datagrid 中的 fitColumns:true