API tools faq
paste
Guest User

Untitled

a guest
Aug 30th, 2018
299
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.07 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2.  
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6.  
  7. <script
  8. src="https://code.jquery.com/jquery-3.3.1.js"
  9. integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  10. crossorigin="anonymous"></script>
  11.  
  12. </head>
  13.  
  14. <body>
  15. <div class="container">
  16.  
  17. <table id="example">
  18. <thead>
  19. <tr>
  20. <th>Actions</th>
  21. <th>First name</th>
  22. <th>Last name</th>
  23. <th>Position</th>
  24. <th>Office</th>
  25. <th>Age</th>
  26. <th>Start date</th>
  27. <th>Salary</th>
  28. <th>Extn.</th>
  29. <th>E-mail</th>
  30. </tr>
  31. </thead>
  32. <tbody>
  33. <tr>
  34. <td>
  35. <button class="actions1">show links</button>
  36. <ul class="actions-list actions1">
  37. <li><a href="#">link</a></li>
  38. <li><a href="#">link</a></li>
  39. <li><a href="#">link</a></li>
  40. <li><a href="#">link</a></li>
  41. <li><a href="#">link</a></li>
  42. </ul>
  43. </td>
  44. <td>Tiger</td>
  45. <td>Nixon</td>
  46. <td>System Architect</td>
  47. <td>Edinburgh</td>
  48. <td>61</td>
  49. <td>2011/04/25</td>
  50. <td>$320,800</td>
  51. <td>5421</td>
  52. <td>t.nixon@datatables.net</td>
  53. </tr>
  54. <tr>
  55. <td>
  56. <button class="actions2">show links</button>
  57. <ul class="actions-list actions2">
  58. <li><a href="#">link</a></li>
  59. <li><a href="#">link</a></li>
  60. <li><a href="#">link</a></li>
  61. <li><a href="#">link</a></li>
  62. <li><a href="#">link</a></li>
  63. </ul>
  64. </td>
  65. <td>Garrett</td>
  66. <td>Winters</td>
  67. <td>Accountant</td>
  68. <td>Tokyo</td>
  69. <td>63</td>
  70. <td>2011/07/25</td>
  71. <td>$170,750</td>
  72. <td>8422</td>
  73. <td>g.winters@datatables.net</td>
  74. </tr>
  75. <tr>
  76. <td>
  77. <button class="actions3">show links</button>
  78. <ul class="actions-list actions3">
  79. <li><a href="#">link</a></li>
  80. <li><a href="#">link</a></li>
  81. <li><a href="#">link</a></li>
  82. <li><a href="#">link</a></li>
  83. <li><a href="#">link</a></li>
  84. </ul>
  85. </td>
  86. <td>Ashton</td>
  87. <td>Cox</td>
  88. <td>Junior Technical Author</td>
  89. <td>San Francisco</td>
  90. <td>66</td>
  91. <td>2009/01/12</td>
  92. <td>$86,000</td>
  93. <td>1562</td>
  94. <td>a.cox@datatables.net</td>
  95. </tr>
  96. <tr>
  97. <td>
  98. <button class="actions4">show links</button>
  99. <ul class="actions-list actions4">
  100. <li><a href="#">link</a></li>
  101. <li><a href="#">link</a></li>
  102. <li><a href="#">link</a></li>
  103. <li><a href="#">link</a></li>
  104. <li><a href="#">link</a></li>
  105. </ul>
  106. </td>
  107. <td>Cedric</td>
  108. <td>Kelly</td>
  109. <td>Senior Javascript Developer</td>
  110. <td>Edinburgh</td>
  111. <td>22</td>
  112. <td>2012/03/29</td>
  113. <td>$433,060</td>
  114. <td>6224</td>
  115. <td>c.kelly@datatables.net</td>
  116. </tr>
  117. <tr>
  118. <td>
  119. <button class="actions5">show links</button>
  120. <ul class="actions-list actions5">
  121. <li><a href="#">link</a></li>
  122. <li><a href="#">link</a></li>
  123. <li><a href="#">link</a></li>
  124. <li><a href="#">link</a></li>
  125. <li><a href="#">link</a></li>
  126. </ul>
  127. </td>
  128. <td>Airi</td>
  129. <td>Satou</td>
  130. <td>Accountant</td>
  131. <td>Tokyo</td>
  132. <td>33</td>
  133. <td>2008/11/28</td>
  134. <td>$162,700</td>
  135. <td>5407</td>
  136. <td>a.satou@datatables.net</td>
  137. </tr>
  138. <tr>
  139. <td>
  140. <button class="actions6">show links</button>
  141. <ul class="actions-list actions6">
  142. <li><a href="#">link</a></li>
  143. <li><a href="#">link</a></li>
  144. <li><a href="#">link</a></li>
  145. <li><a href="#">link</a></li>
  146. <li><a href="#">link</a></li>
  147. </ul>
  148. </td>
  149. <td>Brielle</td>
  150. <td>Williamson</td>
  151. <td>Integration Specialist</td>
  152. <td>New York</td>
  153. <td>61</td>
  154. <td>2012/12/02</td>
  155. <td>$372,000</td>
  156. <td>4804</td>
  157. <td>b.williamson@datatables.net</td>
  158. </tr>
  159. <tr>
  160. <td>
  161. <button class="actions7">show links</button>
  162. <ul class="actions-list actions7">
  163. <li><a href="#">link</a></li>
  164. <li><a href="#">link</a></li>
  165. <li><a href="#">link</a></li>
  166. <li><a href="#">link</a></li>
  167. <li><a href="#">link</a></li>
  168. </ul>
  169. </td>
  170. <td>Herrod</td>
  171. <td>Chandler</td>
  172. <td>Sales Assistant</td>
  173. <td>San Francisco</td>
  174. <td>59</td>
  175. <td>2012/08/06</td>
  176. <td>$137,500</td>
  177. <td>9608</td>
  178. <td>h.chandler@datatables.net</td>
  179. </tr>
  180. <tr>
  181. <td>
  182. <button class="actions8">show links</button>
  183. <ul class="actions-list actions8">
  184. <li><a href="#">link</a></li>
  185. <li><a href="#">link</a></li>
  186. <li><a href="#">link</a></li>
  187. <li><a href="#">link</a></li>
  188. <li><a href="#">link</a></li>
  189. </ul>
  190. </td>
  191. <td>Rhona</td>
  192. <td>Davidson</td>
  193. <td>Integration Specialist</td>
  194. <td>Tokyo</td>
  195. <td>55</td>
  196. <td>2010/10/14</td>
  197. <td>$327,900</td>
  198. <td>6200</td>
  199. <td>r.davidson@datatables.net</td>
  200. </tr>
  201. <tr>
  202. <td>
  203. <button class="actions9">show links</button>
  204. <ul class="actions-list actions9">
  205. <li><a href="#">link</a></li>
  206. <li><a href="#">link</a></li>
  207. <li><a href="#">link</a></li>
  208. <li><a href="#">link</a></li>
  209. <li><a href="#">link</a></li>
  210. </ul>
  211. </td>
  212. <td>Colleen</td>
  213. <td>Hurst</td>
  214. <td>Javascript Developer</td>
  215. <td>San Francisco</td>
  216. <td>39</td>
  217. <td>2009/09/15</td>
  218. <td>$205,500</td>
  219. <td>2360</td>
  220. <td>c.hurst@datatables.net</td>
  221. </tr>
  222. <tr>
  223. <td>
  224. <button class="actions10">show links</button>
  225. <ul class="actions-list actions10">
  226. <li><a href="#">link</a></li>
  227. <li><a href="#">link</a></li>
  228. <li><a href="#">link</a></li>
  229. <li><a href="#">link</a></li>
  230. <li><a href="#">link</a></li>
  231. </ul>
  232. </td>
  233. <td>Sonya</td>
  234. <td>Frost</td>
  235. <td>Software Engineer</td>
  236. <td>Edinburgh</td>
  237. <td>23</td>
  238. <td>2008/12/13</td>
  239. <td>$103,600</td>
  240. <td>1667</td>
  241. <td>s.frost@datatables.net</td>
  242. </tr>
  243. <tr>
  244. <td>
  245. <button class="actions11">show links</button>
  246. <ul class="actions-list actions11">
  247. <li><a href="#">link</a></li>
  248. <li><a href="#">link</a></li>
  249. <li><a href="#">link</a></li>
  250. <li><a href="#">link</a></li>
  251. <li><a href="#">link</a></li>
  252. </ul>
  253. </td>
  254. <td>Jena</td>
  255. <td>Gaines</td>
  256. <td>Office Manager</td>
  257. <td>London</td>
  258. <td>30</td>
  259. <td>2008/12/19</td>
  260. <td>$90,560</td>
  261. <td>3814</td>
  262. <td>j.gaines@datatables.net</td>
  263. </tr>
  264. <tr>
  265. <td>
  266. <button class="actions12">show links</button>
  267. <ul class="actions-list actions12">
  268. <li><a href="#">link</a></li>
  269. <li><a href="#">link</a></li>
  270. <li><a href="#">link</a></li>
  271. <li><a href="#">link</a></li>
  272. <li><a href="#">link</a></li>
  273. </ul>
  274. </td>
  275. <td>Quinn</td>
  276. <td>Flynn</td>
  277. <td>Support Lead</td>
  278. <td>Edinburgh</td>
  279. <td>22</td>
  280. <td>2013/03/03</td>
  281. <td>$342,000</td>
  282. <td>9497</td>
  283. <td>q.flynn@datatables.net</td>
  284. </tr>
  285. </tbody>
  286. </table>
  287.  
  288. </div>
  289.  
  290. </body>
  291. </html>
  292.  
  293. .container {
  294. height: 300px;
  295. width: 600px;
  296. background-color: tan;
  297. overflow:auto;
  298. }
  299.  
  300. table {
  301. border-collapse: collapse;
  302. }
  303.  
  304. table tbody tr td, table thead tr th {
  305. border: 1px solid black;
  306. height: 50px;
  307. width: 1px;
  308. white-space: nowrap;
  309. }
  310.  
  311. td:nth-child(1), th:nth-child(1) {
  312. position:sticky;
  313. position:-webkit-sticky;
  314. left: 0px;
  315. z-index:1;
  316. background-color:grey;
  317. }
  318.  
  319. td:nth-child(2), th:nth-child(2) {
  320. position:sticky;
  321. position:-webkit-sticky;
  322. left: 74px;
  323. z-index:1;
  324. background-color:grey;
  325. }
  326.  
  327. table thead tr th {
  328. background-color: red;
  329. position: sticky;
  330. position: -webkit-sticky;
  331. top: 0px;
  332. z-index: 5;
  333. }
  334.  
  335. table thead tr th:nth-child(1),
  336. table thead tr th:nth-child(2) {
  337. z-index: 6;
  338. }
  339.  
  340. ul {
  341. display: none;
  342. }
  343.  
  344. li{
  345. position: relative;
  346. }
  347.  
  348. .actions-list {
  349. position: absolute;
  350. border: 1px solid black;
  351. height: 200px;
  352. width: 100px;
  353. top: 20px;
  354. left: 15px;
  355. z-index:10;
  356. background-color: pink;
  357. }
  358.  
  359. $("button").click(function(e) {
  360. el = $("ul." + this.className).toggle()
  361. })
  362.  
  363. td:nth-child(2), th:nth-child(2) {
  364. position: absolute;
  365. top: 0;
  366. left: 74px;
  367. z-index:1;
  368. background-color:grey;
  369. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!