html表格第一列和最后一列冻结

html表格第一列和最后一列冻结

阿闰 

使用div思路，div溢出滚动，

js动态获取宽度，

缺陷，滚动条不是很美观

1. .zuo{

2. width: 15%;

3. height: 100%;

4. /* border: 1px solid green; */

5. float:left;

6. background: #f0f0f0;

7. }

8.  

9. .zhong{

10. width: 69%;

11. height: 100%;

12. /* border: 1px solid yellow; */

13. float: left;

14. overflow: scroll;

15. overflow-y: hidden;

16. }

17. .you{

18. width:15%;

19. height:100%;

20. /* border:1px solid green; */

21. float:right;

22. background: #f0f0f0;

23. }

24. .gun{

25. width:1600px;

26. height:100%;

27. }

 

html

1.  

2. <div class="zuo" id="zuo">

3.  

4. <table class="table table-hover" >

5. <thead>

6. <tr>

7. <th style="text-align:center;">订单ID</th>

8. </tr>

9. </thead>

10. <tbody align="center >

11.  

12. <tr>

13. <td>111111</td>

14. </tr>

15. </tbody>

16.  

17. </table>

18.  

19. </div>

20.  

21. <div class="zhong" id="zhong">

22. <div class="gun" id="gun">

23. <table class="table table-hover">

24. <thead>

25. <tr>

26. <th>站名</th>

27.  

28. </tr>

29. </thead>

30. <tbody>

31.  

32. <tr>

33. <td>666</td>

34.  

35. </tr>

36.  

37. </tbody>

38. </table>

39. </div>

40. </div>

41.  

42. <div class="you" id="you">

43. <table class="table table-hover">

44. <thead>

45. <tr>

46. <th style="text-align:center;">操作</th>

47. </tr>

48. </thead>

49. <tbody align="center">

50.  

51. <tr>

52. <td>

53. 123

54. </td>

55. </tr>

56.  

57. </tbody>

58. </table>

59.  
60.  

61. </div>

1. function tabledj() {

2. var box = document.getElementById("PartialMenuListPage");//30

3. // var tableHeight = window.getComputedStyle(box).height;

4. var tableWidth = window.getComputedStyle(box).width;

5.  

6. document.getElementById("zuo").style.width= 145 +"px"; //145 左边

7. tableWidth=tableWidth.replace("px", "");

8. document.getElementById("zhong").style.width=(tableWidth-145-155-30*2) +"px";//中间

9. document.getElementById("gun").style.width= tableWidth*1.5 +"px"; //中间的中间

10. document.getElementById("you").style.width= 155 +"px"; //155 右边

11.  

12. }

13.  

14. setInterval(function() {

15. tabledj();

16. }, 0);