Posted By

COBOLdinosaur on 01/06/13


Tagged

table display properties scrollable fixed headings


Versions (?)

Fixed Heading Scrollable Table Simulation


 / Published in: CSS
 

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

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

  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. }

Report this snippet  

You need to login to post a comment.