treetable.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. .ui-treetable {
  2. position: relative;
  3. }
  4. .ui-treetable table {
  5. border-collapse: collapse;
  6. width: 100%;
  7. table-layout: fixed;
  8. }
  9. .ui-treetable .ui-treetable-thead > tr > th,
  10. .ui-treetable .ui-treetable-tbody > tr > td,
  11. .ui-treetable .ui-treetable-tfoot > tr > td {
  12. padding: .25em .5em;
  13. }
  14. .ui-treetable .ui-treetable-toggler {
  15. cursor: pointer;
  16. display: inline-block;
  17. height: 1em;
  18. position: relative;
  19. top: 50%;
  20. margin-top: -.5em;
  21. }
  22. .ui-treetable .ui-sortable-column {
  23. cursor: pointer;
  24. }
  25. .ui-treetable p-treetablesorticon {
  26. vertical-align: middle;
  27. }
  28. .ui-treetable-auto-layout > .ui-treetable-wrapper {
  29. overflow-x: auto;
  30. }
  31. .ui-treetable-auto-layout > .ui-treetable-wrapper > table {
  32. table-layout: auto;
  33. }
  34. .ui-treetable .ui-treetable-chkbox {
  35. margin: 0 .25em;
  36. vertical-align: middle;
  37. }
  38. /* Sections */
  39. .ui-treetable-caption,
  40. .ui-treetable-summary {
  41. padding: .25em .5em;
  42. text-align: center;
  43. font-weight: bold;
  44. }
  45. .ui-treetable-caption {
  46. border-bottom: 0 none;
  47. }
  48. .ui-treetable-summary {
  49. border-top: 0 none;
  50. }
  51. /* Paginator */
  52. .ui-treetable .ui-paginator-top {
  53. border-bottom: 0 none;
  54. }
  55. .ui-treetable .ui-paginator-bottom {
  56. border-top: 0 none;
  57. }
  58. /* Scrollable */
  59. .ui-treetable-scrollable-wrapper {
  60. position: relative;
  61. }
  62. .ui-treetable-scrollable-header,
  63. .ui-treetable-scrollable-footer {
  64. overflow: hidden;
  65. border: 0 none;
  66. }
  67. .ui-treetable-scrollable-body {
  68. overflow: auto;
  69. position: relative;
  70. }
  71. .ui-treetable-scrollable-body > table > .ui-treetable-tbody > tr:first-child > td {
  72. border-top: 0 none;
  73. }
  74. .ui-treetable-virtual-table {
  75. position: absolute;
  76. }
  77. /* Frozen Columns */
  78. .ui-treetable-frozen-view .ui-treetable-scrollable-body {
  79. overflow: hidden;
  80. }
  81. .ui-treetable-frozen-view > .ui-treetable-scrollable-body > table > .ui-treetable-tbody > tr > td:last-child {
  82. border-right: 0 none;
  83. }
  84. .ui-treetable-unfrozen-view {
  85. position: absolute;
  86. top: 0px;
  87. }
  88. /* Resizable */
  89. .ui-treetable-resizable > .ui-treetable-wrapper {
  90. overflow-x: auto;
  91. }
  92. .ui-treetable-resizable .ui-treetable-thead > tr > th,
  93. .ui-treetable-resizable .ui-treetable-tfoot > tr > td,
  94. .ui-treetable-resizable .ui-treetable-tbody > tr > td {
  95. overflow: hidden;
  96. }
  97. .ui-treetable-resizable .ui-resizable-column {
  98. background-clip: padding-box;
  99. position: relative;
  100. }
  101. .ui-treetable-resizable-fit .ui-resizable-column:last-child .ui-column-resizer {
  102. display: none;
  103. }
  104. .ui-treetable .ui-column-resizer {
  105. display: block;
  106. position: absolute !important;
  107. top: 0;
  108. right: 0;
  109. margin: 0;
  110. width: .5em;
  111. height: 100%;
  112. padding: 0px;
  113. cursor:col-resize;
  114. border: 1px solid transparent;
  115. }
  116. .ui-treetable .ui-column-resizer-helper {
  117. width: 1px;
  118. position: absolute;
  119. z-index: 10;
  120. display: none;
  121. }
  122. /* Reorder */
  123. .ui-treetable-reorder-indicator-up,
  124. .ui-treetable-reorder-indicator-down {
  125. position: absolute;
  126. display: none;
  127. }
  128. /* Responsive */
  129. .ui-treetable-responsive .ui-treetable-tbody > tr > td .ui-column-title {
  130. display: none;
  131. }
  132. @media screen and (max-width: 40em) {
  133. .ui-treetable-responsive .ui-treetable-thead > tr > th,
  134. .ui-treetable-responsive .ui-treetable-tfoot > tr > td {
  135. display: none !important;
  136. }
  137. .ui-treetable-responsive .ui-treetable-tbody > tr > td {
  138. text-align: left;
  139. display: block;
  140. border: 0 none;
  141. width: 100% !important;
  142. -webkit-box-sizing: border-box;
  143. -moz-box-sizing: border-box;
  144. box-sizing: border-box;
  145. float: left;
  146. clear: left;
  147. }
  148. .ui-treetable-responsive .ui-treetable-tbody > tr > td .ui-column-title {
  149. padding: .4em;
  150. min-width: 30%;
  151. display: inline-block;
  152. margin: -.4em 1em -.4em -.4em;
  153. font-weight: bold;
  154. }
  155. }
  156. /* Loader */
  157. .ui-treetable-loading {
  158. position: absolute;
  159. width: 100%;
  160. height: 100%;
  161. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  162. opacity: 0.1;
  163. z-index: 1;
  164. }
  165. .ui-treetable-loading-content {
  166. position: absolute;
  167. left: 50%;
  168. top: 50%;
  169. z-index: 2;
  170. margin-top: -1em;
  171. margin-left: -1em;
  172. }
  173. .ui-treetable .ui-treetable-loading-icon {
  174. font-size: 2em;
  175. }