Posted By

merrittwjm on 12/17/15


Tagged

scroll div css table html


Versions (?)

Scrollable Div Table


 / Published in: CSS
 

Build a div table with fixed header and scrollable rows

  1. /*Build the div table*/
  2. .tableContainer {
  3. display: block;
  4. position: fixed;
  5. height: 40%;
  6. width: 98%;
  7. overflow-y: scroll;
  8. -webkit-border-radius: 10px;
  9. -moz-border-radius: 10px;
  10. border-radius: 10px;
  11. border:1px solid #999;
  12. /* Prevent background color leak outs */
  13. /*
  14.   -webkit-background-clip: padding-box;
  15.   -moz-background-clip: padding;
  16.   background-clip: padding-box;
  17. */
  18. }
  19. .tableHeader {
  20. width:98%;
  21. position:fixed;
  22. }
  23. .tableBody {
  24. display: table;
  25. width: 100%;
  26. position: static;
  27. margin-top: 24px;
  28. }
  29. .divTableHead{
  30. display: table-header-group;
  31. }
  32. .divTable {
  33. width: 100%;
  34. display: table;
  35. }
  36.  
  37. .headerBG {
  38. background-color: #ccc;
  39. -webkit-border-radius: 10px;
  40. -moz-border-radius: 10px;
  41. border-radius: 10px;
  42. border: 1px solid #999;
  43. /* Prevent background color leak outs */
  44. /*
  45.   -webkit-background-clip: padding-box;
  46.   -moz-background-clip: padding;
  47.   background-clip: padding-box;
  48. */
  49. }
  50. .divTableRow {
  51. display: table-row;
  52. }
  53. .divTableRow:nth-child(even) {
  54. background: #e9e9e9;
  55. }
  56.  
  57. .divTableBody {
  58. display: table-row-group;
  59. }
  60. .divTableFoot {
  61. display: table-footer-group;
  62. font-weight: bold;
  63. background-color: #ddd;
  64. }
  65. .divTableCell {
  66. display: table-cell;
  67. padding: 3px 10px;
  68. border-right: 1px solid #999;
  69. word-break: break-all;
  70. }
  71.  
  72. .col1 {
  73. width: 5%;
  74. }
  75. .col2 {
  76. width: 5%;
  77. }
  78. .col3 {
  79. width: 9%;
  80. }
  81. .col4 {
  82. width: 7%;
  83. }
  84. .col5 {
  85. width: 6%;
  86. }
  87. .col6 {
  88. width: 6%;
  89. }
  90. .col7 {
  91. width: 18%;
  92. }
  93. .col8 {
  94. width: 6%;
  95. }
  96. .col9 {
  97. width: 9%;
  98. }
  99. .col10 {
  100. width: 6%;
  101. }
  102.  
  103. <div class="tableContainer">
  104. <div class="tableHeader">
  105. <div class="divTable">
  106. <div class="divTableRow divTableHead headerBG">
  107. <div class="divTableCell col1">Client ID</div>
  108. <div class="divTableCell col2">Project ID</div>
  109. <div class="divTableCell col3">Name</div>
  110. <div class="divTableCell col4">LOE</div>
  111. <div class="divTableCell col5">Start</div>
  112. <div class="divTableCell col6">End</div>
  113. <div class="divTableCell col7">Description</div>
  114. <div class="divTableCell col8">Size</div>
  115. <div class="divTableCell col9">Proposal</div>
  116. <div class="divTableCell col10">Status</div>
  117. </div>
  118. </div>
  119. </div>
  120. <div class="tableBody">
  121. <div class="divTable">
  122. <div class="divTableRow">
  123. <div class="divTableCell col1">c-001</div>
  124. <div class="divTableCell col2">p-001</div>
  125. <div class="divTableCell col3">Some New Project</div>
  126. <div class="divTableCell col4">Medium</div>
  127. <div class="divTableCell col5">01-15-16</div>
  128. <div class="divTableCell col6">03-15-16</div>
  129. <div class="divTableCell col7">Lorem ipsum dolor sit amet, natum inimicus adolescens mel ei. Et aeque altera pericula sed, soleat dissentias ad pri. Tollit democritum ad mel, falli harum et vis, vim nibh facilisis in. In dicat intellegebat nec, vis eu minim intellegam, ponderum eloquentiam has ne. Sed ad eligendi appetere nominati, ex qui mandamus vituperata.</div>
  130. <div class="divTableCell col8">Medium</div>
  131. <div class="divTableCell col9">/client/proposal/</div>
  132. <div class="divTableCell col10">Received</div>
  133. </div>
  134. <div class="divTableRow">
  135. <div class="divTableCell col1">c-001</div>
  136. <div class="divTableCell col2">p-001</div>
  137. <div class="divTableCell col3">Some New Project</div>
  138. <div class="divTableCell col4">Medium</div>
  139. <div class="divTableCell col5">01-15-16</div>
  140. <div class="divTableCell col6">03-15-16</div>
  141. <div class="divTableCell col7">Lorem ipsum dolor sit amet, natum inimicus adolescens mel ei. Et aeque altera pericula sed, soleat dissentias ad pri. Tollit democritum ad mel, falli harum et vis, vim nibh facilisis in. In dicat intellegebat nec, vis eu minim intellegam, ponderum eloquentiam has ne. Sed ad eligendi appetere nominati, ex qui mandamus vituperata.</div>
  142. <div class="divTableCell col8">Medium</div>
  143. <div class="divTableCell col9">/client/proposal/</div>
  144. <div class="divTableCell col10">Received</div>
  145. </div>
  146. <div class="divTableRow">
  147. <div class="divTableCell col1">c-001</div>
  148. <div class="divTableCell col2">p-001</div>
  149. <div class="divTableCell col3">Some New Project</div>
  150. <div class="divTableCell col4">Medium</div>
  151. <div class="divTableCell col5">01-15-16</div>
  152. <div class="divTableCell col6">03-15-16</div>
  153. <div class="divTableCell col7">Lorem ipsum dolor sit amet, natum inimicus adolescens mel ei. Et aeque altera pericula sed, soleat dissentias ad pri. Tollit democritum ad mel, falli harum et vis, vim nibh facilisis in. In dicat intellegebat nec, vis eu minim intellegam, ponderum eloquentiam has ne. Sed ad eligendi appetere nominati, ex qui mandamus vituperata.</div>
  154. <div class="divTableCell col8">Medium</div>
  155. <div class="divTableCell col9">/client/proposal/</div>
  156. <div class="divTableCell col10">Received</div>
  157. </div>
  158. <div class="divTableRow">
  159. <div class="divTableCell col1">c-001</div>
  160. <div class="divTableCell col2">p-001</div>
  161. <div class="divTableCell col3">Some New Project</div>
  162. <div class="divTableCell col4">Medium</div>
  163. <div class="divTableCell col5">01-15-16</div>
  164. <div class="divTableCell col6">03-15-16</div>
  165. <div class="divTableCell col7">Lorem ipsum dolor sit amet, natum inimicus adolescens mel ei. Et aeque altera pericula sed, soleat dissentias ad pri. Tollit democritum ad mel, falli harum et vis, vim nibh facilisis in. In dicat intellegebat nec, vis eu minim intellegam, ponderum eloquentiam has ne. Sed ad eligendi appetere nominati, ex qui mandamus vituperata.</div>
  166. <div class="divTableCell col8">Medium</div>
  167. <div class="divTableCell col9">/client/proposal/</div>
  168. <div class="divTableCell col10">Received</div>
  169. </div>
  170. </div>
  171. </div>
  172.  
  173. </div>

Report this snippet  

You need to login to post a comment.