mini-fit放在<td>里无法正确适应窗口的问题

cciikk

当把浏览器窗口缩小后,mini-fit并没让grid出现水平滚动条,而是浏览器自身出水平滚动条了.这里应该怎么修改下让grid正确出现水平滚动条呢?

1. &lt;%@ page language="java" contentType="text/html; charset=UTF-8"
   
2.         pageEncoding="UTF-8" session="false" %&gt;
   
3.         
   
4. &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
   
5. &lt;html&gt;
   
6. &lt;!--
   
7.   - Author(s):
   
8.   - Date: 2015-07-06 21:13:26
   
9.   - Description:
   
10. --&gt;
    
11. &lt;link href="../t1/style.css" rel="stylesheet" type="text/css" /&gt;
    
12. &lt;head&gt;
    
13. &lt;title&gt;Title&lt;/title&gt;
    
14.     &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
    
15.     &lt;script src="&lt;%= request.getContextPath() %&gt;/common/nui/nui.js" type="text/javascript"&gt;&lt;/script&gt;
    
16.    
    
17. &lt;/head&gt;
    
18. &lt;body&gt;
    
19. 
    
20. &lt;table&gt;
    
21.         &lt;tr&gt;
    
22.                 &lt;td colspan="3" class="td_title"&gt;
    
23.                 XYZ
    
24.                 &lt;/td&gt;
    
25.         &lt;/tr&gt;
    
26.         &lt;tr&gt;
    
27.                 &lt;td colspan="3"&gt;
    
28.                          &lt;div class="nui-fit"&gt;
    
29.                 &lt;div id="datagrid1" dataField="tcountrys" class="nui-datagrid" style="width:100%;height:300px;" url="com.primeton.eos.t1.tcountrybiz.queryTCountrys.biz.ext" pageSize="10" showPageInfo="true" multiSelect="true" onselectionchanged="selectionChanged" allowSortColumn="false"&gt;
    
30.                     &lt;div property="columns"&gt;
    
31.                         &lt;div type="indexcolumn"&gt;
    
32.                         &lt;/div&gt;
    
33.                         &lt;div type="checkcolumn"&gt;
    
34.                         &lt;/div&gt;
    
35.                         &lt;div field="id" headerAlign="center" allowSort="true" visible="false"&gt;
    
36.                             id
    
37.                         &lt;/div&gt;
    
38.                         &lt;div field="name" headerAlign="center" allowSort="true" &gt;
    
39.                             name
    
40.                         &lt;/div&gt;
    
41.                         &lt;div field="name" headerAlign="center" allowSort="true" &gt;
    
42.                             A
    
43.                         &lt;/div&gt;
    
44.                         &lt;div field="name" headerAlign="center" allowSort="true" &gt;
    
45.                             B
    
46.                         &lt;/div&gt;
    
47.                         &lt;div field="name" headerAlign="center" allowSort="true" &gt;
    
48.                             C
    
49.                         &lt;/div&gt;
    
50.                         &lt;div field="name" headerAlign="center" allowSort="true" &gt;
    
51.                             D
    
52.                         &lt;/div&gt;
    
53.                         &lt;div field="name" headerAlign="center" allowSort="true" &gt;
    
54.                             E
    
55.                         &lt;/div&gt;
    
56.                         &lt;div field="name" headerAlign="center" allowSort="true" &gt;
    
57.                             F
    
58.                         &lt;/div&gt;
    
59.                     &lt;/div&gt;
    
60.                 &lt;/div&gt;
    
61.             &lt;/div&gt;
    
62.                 &lt;/td&gt;
    
63.         &lt;/tr&gt;
    
64.         &lt;tr&gt;
    
65.                 &lt;td class="td_bottom_left"&gt;
    
66.                  第一列
    
67.                 &lt;/td&gt;
    
68.                 &lt;td&gt;
    
69.                 第二利
    
70.                 &lt;/td&gt;
    
71.                 &lt;td class="td_bottom_right"&gt;
    
72.                 第三列
    
73.                 &lt;/td&gt;
    
74.         &lt;/tr&gt;
    
75. &lt;/table&gt;
    
76. 
    
77.         &lt;script type="text/javascript"&gt;
    
78.             nui.parse();
    
79.             var grid = nui.get("datagrid1");
    
80.             
    
81.             grid.load();
    
82.     &lt;/script&gt;
    
83. &lt;/body&gt;
    
84. &lt;/html&gt;

复制代码

dforce

mini-fit只是撑满父元素，你的table，td又没尺寸，怎么撑满

cciikk

dforce 发表于 2015-7-7 09:15
mini-fit只是撑满父元素，你的table，td又没尺寸，怎么撑满

即便table和td有尺寸但也只有是固定尺寸才生效啊

为啥table和td用宽度100%就不行呢?

dforce

cciikk 发表于 2015-7-7 12:16
即便table和td有尺寸但也只有是固定尺寸才生效啊

为啥table和td用宽度100%就不行呢? ...

百分比都是基于父元素的尺寸计算
你这个页面table的父元素是body,body未设置尺寸,table未设置table-layout:fixed

cciikk

dforce 发表于 2015-7-7 13:59
百分比都是基于父元素的尺寸计算
你这个页面table的父元素是body,body未设置尺寸,table未设置table-layou ...

最后换成div+css布局解决了