test.blade.php 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. {{--@extends('layouts.app')
  2. @section('content')
  3. <div>
  4. <table class="table table-hover table-striped table-bordered">
  5. <tr>
  6. <th>11</th>
  7. <th>22</th>
  8. <th>33</th>
  9. <th>44</th>
  10. <th>55</th>
  11. <th>66</th>
  12. <th>77</th>
  13. <th>88</th>
  14. <th>99</th>
  15. <th>100</th>
  16. <th>110</th>
  17. <th>120</th>
  18. <th>130</th>
  19. <th>140</th>
  20. <th>150</th>
  21. <th>160</th>
  22. <th>170</th>
  23. <th>180</th>
  24. <th>190</th>
  25. <th>200</th>
  26. </tr>
  27. <tr>
  28. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  29. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  30. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  31. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  32. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  33. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  34. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  35. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  36. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  37. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  38. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  39. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  40. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  41. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  42. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  43. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  44. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  45. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  46. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  47. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  48. </tr>
  49. <tr>
  50. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  51. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  52. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  53. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  54. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  55. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  56. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  57. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  58. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  59. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  60. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  61. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  62. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  63. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  64. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  65. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  66. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  67. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  68. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  69. <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
  70. </tr>
  71. </table>
  72. </div>
  73. @endsection--}}
  74. <html>   
  75. <head>   
  76. <title></title>   
  77. <style type="text/css">
  78. .Freezing {
  79. z-index: 10;
  80. position: relative;
  81. top: expression(this.offsetParent.scrollTop)
  82. }
  83. .FreezingCol {
  84. z-index: 1;
  85. left: expression(document.getElementById("freezingDiv").scrollLeft);
  86. position: relative;
  87. }   
  88. </style>   
  89. </head>   
  90. <body>   
  91.   <br>
  92. div table固定列<br>
  93. <div id="freezingDiv" style="overflow:auto; width:400px; height:155px">   
  94.   <table cellspacing="0" cellpadding="4" rules="all" bordercolor="#3366CC" border="1" id="DataGrid1" style="background-color:White;border-color:#3366CC;border-width:1px;border-style:None;width:900px;border-collapse:collapse;">   
  95.  
  96.     <tr class="Freezing" style="color:#CCCCFF;background-color:#003399;font-weight:bold;">
  97.         <td class="FreezingCol">ID</td>   
  98.         <td class="FreezingCol">姓名</td>   
  99.         <td>年龄</td>   
  100.         <td>电话</td>   
  101.         <td>性别</td>   
  102.         <td>住址</td>   
  103.     </tr>   
  104.        
  105.     <tr style="color:#003399;background-color:White;">   
  106.         <td class="FreezingCol">   
  107.          <span>1</span>    
  108.         </td>   
  109.         <td class="FreezingCol">   
  110.         <span>张三</span>    
  111.         </td>   
  112.         <td>29</td>   
  113.         <td>0000000000000</td>   
  114.         <td>男</td>   
  115.         <td>北京</td>   
  116.    </tr>
  117.    <tr style="color:#003399;background-color:White;">   
  118.         <td class="FreezingCol">   
  119.            <span>1</span>    
  120.         </td>   
  121.         <td class="FreezingCol">   
  122.           <span>李四</span>    
  123.         </td>   
  124.         <td>29</td>   
  125.         <td>0000000000000</td>   
  126.         <td>男</td>   
  127.         <td>上海</td>   
  128.    </tr>
  129.    <tr style="color:#003399;background-color:White;">   
  130.         <td class="FreezingCol">   
  131.            <span>1</span>    
  132.         </td>   
  133.         <td class="FreezingCol">   
  134.           <span>王五</span>    
  135.         </td>   
  136.         <td>50</td>   
  137.         <td>0000000000000</td>   
  138.         <td>男</td>   
  139.         <td>上海</td>   
  140.    </tr>
  141.    <tr style="color:#003399;background-color:White;">   
  142.         <td class="FreezingCol">   
  143.            <span>1</span>    
  144.         </td>   
  145.         <td class="FreezingCol">   
  146.           <span>赵六</span>    
  147.         </td>   
  148.         <td>29</td>   
  149.         <td>0000000000000</td>   
  150.         <td>男</td>   
  151.         <td>上海</td>   
  152.    </tr> 
  153.    <tr style="color:#003399;background-color:White;">   
  154.         <td class="FreezingCol">   
  155.            <span>1</span>    
  156.         </td>   
  157.         <td class="FreezingCol">   
  158.           <span>赵七</span>    
  159.         </td>   
  160.         <td>29</td>   
  161.         <td>0000000000000</td>   
  162.         <td>男</td>   
  163.         <td>上海</td>   
  164.    </tr>        
  165.   </table>   
  166. </div>   
  167. <br>
  168. cellspacing =0<br>
  169. <table width="200" cellspacing="0" border="1" bordercolor="#000000">
  170. <tr> 
  171. <td>sd </td>
  172. <td>sd </td>
  173. <td>sd </td>
  174. </tr>
  175. </table>
  176. <br>
  177. cellspacing =8<br>
  178. <table width="200" cellspacing="8" border="1" bordercolor="#000000">
  179. <tr>
  180. <td>sd </td>
  181. <td> dd</td>
  182. <td>dd </td>
  183. </tr>
  184. </table>
  185.   
  186. </body>   
  187. </html>