标签：
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>
标签：
原文地址：http://www.cnblogs.com/dszhoulonggui2016/p/5456633.html
