Fixed Heading Scrollable Table Simulation


/ Published in: CSS
Save to your folder(s)

Uses the table display properties in div tags to merge the attributes of multiple tags.


Copy this code and paste it in your HTML
  1. The HTML:
  2.  
  3. <div class="htabl">
  4. <div class="tabcap">Table with fixed headings</div>
  5. <div class="row">
  6. <div class="cell" title="Left">one</div>
  7. <div class="cell" title="Middle">two</div>
  8.  
  9. <div class="cell" title="Right">three</div>
  10. </div>
  11. </div>
  12. <div id="wrapper">
  13. <div class="tabl">
  14. <div class="row">
  15. <div class="cell">
  16. CELL one with a bunch of stuff in here screw it up
  17. </div>
  18. <div class="cell"> CELL two</div>
  19.  
  20. <div class="cell"> CELL three</div>
  21. </div>
  22. <div class="row">
  23. <div class="cell" title="Left"> CELL one</div>
  24. <div class="cell" title="Middle"> CELL two</div>
  25. <div class="cell" title="Right"> CELL three</div>
  26.  
  27. </div>
  28. <div class="row">
  29. <div class="cell"> CELL one</div>
  30. <div class="cell"> CELL two</div>
  31. <div class="cell"> CELL three</div>
  32. </div>
  33.  
  34. <div class="row">
  35. <div class="cell"> CELL one</div>
  36. <div class="cell"> CELL two</div>
  37. <div class="cell">
  38. CELL three some extra stuff to see what happens
  39. </div>
  40. </div> ...
  41.  
  42. The CSS
  43.  
  44. .cell {
  45. display:table-cell;
  46. border:1px solid black;
  47. padding:5px;
  48. border-radius:8px;
  49. vertical-align:middle;
  50. }
  51. .row {
  52. display:table-row
  53. }
  54. .tabcap {
  55. color:navy;
  56. font-size:125%;
  57. font-weight:bold;
  58. display:table-caption;
  59. }
  60. .htabl {
  61. width:400px;
  62. display:table;
  63. margin:0px auto;
  64. padding-right:10px;
  65. border:2px solid red;
  66. // this border is just for testing
  67. // remove for production
  68. }
  69.  
  70. .htabl .cell {
  71. border:1px solid white;
  72. border-radius:12px;
  73. background-color:blue;
  74. color:white;
  75. font-size:1.5em;
  76. text-align:center;
  77. }
  78. #wrapper {
  79. max-height:200px;
  80. overflow-y:scroll;
  81. overflow-x:hidden;
  82. width:420px;
  83. margin:auto;
  84. padding-left:4px;
  85. border:2px dashed black;
  86. // this border is just for testing
  87. // remove for production
  88. }
  89. .tabl {
  90. width:400px;
  91. display:table;
  92. margin:0px auto;
  93. border:2px solid red;
  94. // this border is just for testing
  95. // remove for production
  96. }
  97. [title=Left] {
  98. width:110px;
  99. }
  100. [title=Middle] {
  101. width:150px;
  102. }
  103. [title=Right] {
  104. width:130px;
  105. }

URL: http://coboldinosaur.com/pages/Fixed_Heading_Scrollable_Table.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.