1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <%
3 String path = request.getContextPath();
4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
5 %>
6 <!DOCTYPE html>
7 <html>
8 <head>
9 <style type="text/css">
10 * {
11 margin: 0;
12 padding: 0;
13 }
14
15 /*所有内容都在这个DIV内*/
16 .all {
17 width: 100%;
18 border: 1px solid #000000;
19 }
20
21 /*表头在这个DIV内*/
22 .title {
23 width: 500px; /*这个宽度需要与下面的内容的DIV相等*/
24 }
25
26 /*表格样式*/
27 table {
28 width: 100%; /*撑满上面定义的500像素*/
29 border: 1px solid #FF00FF;
30 border-collapse: collapse; /*边线与旁边的合并*/
31 table-layout:fixed;
32 }
33 /*表头单元格(这里将表头单元格的样式设置成了和单元格一样,实际中可以改变)*/
34 table tr th {
35 border: 1px solid #FF00FF;
36 overflow: hidden; /*超出长度的内容不显示*/
37 /*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
38 word-break: break-all; /*字内断开*/
39 text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符*/
40 white-space: nowrap;
41 }
42 /*单元格样式*/
43 table tr td {
44 border: 1px solid #FF00FF;
45 overflow: hidden;
46 /*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
47 word-break: break-all;
48 text-overflow: ellipsis;
49 white-space: nowrap;
50 }
51
52 /*容纳表格内容的DIV,这个DIV上放置滚动条*/
53 .content {
54 width: 100%;
55 height: 300px; /*定一下高度,要不然就撑出来没滚动条了*/
56 overflow: scroll; /*总是显示滚动条*/
57 }
58 /*真正存放内容的DIV*/
59 .content div {
60 width: 500px; /*与表头的DIV宽度相同*/
61 }
62 </style>
63 </head>
64
65 <body>
66 <div class="all">
67 <div class="title">
68 <table>
69 <tr>
70 <th style="width:10%">Operate</th>
71 <th style="width:20%">Date</th>
72 <th style="width:25%">Acknowledge</th>
73 <th style="width:15%">Other1</th>
74 <th style="width:15%">Other2</th>
75 <th>Other3</th>
76 </tr>
77 </table>
78 </div>
79
80 <div class="content">
81 <div>
82 <table>
83 <tr>
84 <td style="width:10%">Operate</td>
85 <td style="width:20%">Date</td>
86 <td style="width:25%">Acknowledge</td>
87 <td style="width:15%">Other1</td>
88 <td style="width:15%">Other2</td>
89 <td>Other3</td>
90 </tr>
91 <tr>
92 <td>Operate</td>
93 <td>Date</td>
94 <td>Acknowledge</td>
95 <td>Other21</td>
96 <td>Other22</td>
97 <td>Other3</td>
98 </tr>
99 <tr>
100 <td>Operate</td>
101 <td>Date</td>
102 <td>Acknowledge</td>
103 <td>Other31</td>
104 <td>Other32</td>
105 <td>Other3</td>
106 </tr>
107 <tr>
108 <td>Operate</td>
109 <td>Date</td>
110 <td>Acknowledge</td>
111 <td>Other41</td>
112 <td>Other42</td>
113 <td>Other3</td>
114 </tr>
115 <tr>
116 <td>Operate</td>
117 <td>2011-12-12 12:22:34 9987</td>
118 <td>Acknowledge</td>
119 <td>Other51</td>
120 <td>Other52</td>
121 <!--每个td上都要加个title,鼠标放上去时显示全部内容,我这里偷懒就写了一个-->
122 <td title="Other3hhhhhhhhhhhhhhhhhhhhhhhhaa">Other3hhhhhhhhhhhhhhhhhhhhhhhhaa</td>
123 </tr>
124 <tr>
125 <td>Operate</td>
126 <td>Date</td>
127 <td>Acknowledge</td>
128 <td>Other41</td>
129 <td>Other42</td>
130 <td>Other3</td>
131 </tr>
132 <tr>
133 <td>Operate</td>
134 <td>Date</td>
135 <td>Acknowledge</td>
136 <td>Other41</td>
137 <td>Other42</td>
138 <td>Other3</td>
139 </tr>
140 <tr>
141 <td>Operate</td>
142 <td>Date</td>
143 <td>Acknowledge</td>
144 <td>Other41</td>
145 <td>Other42</td>
146 <td>Other3</td>
147 </tr>
148 <tr>
149 <td>Operate</td>
150 <td>Date</td>
151 <td>Acknowledge</td>
152 <td>Other41</td>
153 <td>Other42</td>
154 <td>Other3</td>
155 </tr>
156 <tr>
157 <td>Operate</td>
158 <td>Date</td>
159 <td>Acknowledge</td>
160 <td>Other41</td>
161 <td>Other42</td>
162 <td>Other3</td>
163 </tr>
164 <tr>
165 <td>Operate</td>
166 <td>Date</td>
167 <td>Acknowledge</td>
168 <td>Other41</td>
169 <td>Other42</td>
170 <td>Other3</td>
171 </tr>
172 <tr>
173 <td>Operate</td>
174 <td>Date</td>
175 <td>Acknowledge</td>
176 <td>Other41</td>
177 <td>Other42</td>
178 <td>Other3</td>
179 </tr>
180 <tr>
181 <td>Operate</td>
182 <td>Date</td>
183 <td>Acknowledge</td>
184 <td>Other41</td>
185 <td>Other42</td>
186 <td>Other3</td>
187 </tr>
188 <tr>
189 <td>Operate</td>
190 <td>Date</td>
191 <td>Acknowledge</td>
192 <td>Other41</td>
193 <td>Other42</td>
194 <td>Other3</td>
195 </tr>
196 <tr>
197 <td>Operate</td>
198 <td>Date</td>
199 <td>Acknowledge</td>
200 <td>Other41</td>
201 <td>Other42</td>
202 <td>Other3</td>
203 </tr>
204 <tr>
205 <td>Operate</td>
206 <td>Date</td>
207 <td>Acknowledge</td>
208 <td>Other41</td>
209 <td>Other42</td>
210 <td>Other3</td>
211 </tr>
212 </table>
213 </div>
214 </div>
215 </div>
216 </body>
217 </html>
时间： 2024-08-17 11:55:35