API tools faq
paste
Advertisement
SherinKR

Row and Columns Freezing in html

SherinKR
Mar 5th, 2024
806
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.68 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <style>
  7.         table {
  8.             border-collapse: collapse;
  9.             width: 100%;
  10.         }
  11.  
  12.         th, td {
  13.             border: 1px solid #dddddd;
  14.             text-align: left;
  15.             padding: 8px;
  16.             width: 100px;
  17.             min-width: 100px;
  18.             max-width: 100px;
  19.         }
  20.  
  21.         th {
  22.             background-color: #f2f2f2;
  23.             position: sticky;
  24.             top: 0;
  25.         }
  26.  
  27.         th:nth-child(1), td:nth-child(1){
  28.             position: sticky;
  29.             left: 0px;
  30.             background-color: #f2f2f2;
  31.         }
  32.         th:nth-child(2), td:nth-child(2) {
  33.             position: sticky;
  34.             left: 100px;
  35.             background-color: #f2f2f2;
  36.         }
  37.  
  38.         #saveButton {
  39.             margin-top: 10px;
  40.             padding: 8px;
  41.         }
  42.        
  43.         th:nth-child(1),
  44.         th:nth-child(2){
  45.             z-index: 1;
  46.         }
  47.     </style>
  48.     <script>
  49.         function saveData() {
  50.             const table = document.getElementById('marksTable');
  51.             const data = [];
  52.             console.log(data);
  53.         }
  54.     </script>
  55. </head>
  56. <body>
  57.  
  58.     <table id="marksTable">
  59.         <thead>
  60.             <tr>
  61.                 <th>Student ID</th>
  62.                 <th>Student Name</th>
  63.                 <th>Subject 1</th>
  64.                 <th>Subject 2</th>
  65.                 <th>Subject 3</th>
  66.                 <th>Subject 4</th>
  67.                 <th>Subject 5</th>
  68.                 <th>Subject 6</th>
  69.                 <th>Subject 7</th>
  70.                 <th>Subject 8</th>
  71.                 <th>Subject 9</th>
  72.                 <th>Subject 10</th>
  73.                 <th>Total</th>
  74.             </tr>
  75.         </thead>
  76.         <tbody>
  77.             <!-- Sample data, you can dynamically generate rows as needed -->
  78.             <tr>
  79.                 <td>1</td>
  80.                 <td>John Doe</td>
  81.                 <td contenteditable="true">10</td>
  82.                 <td contenteditable="true">10</td>
  83.                 <td contenteditable="true">10</td>
  84.                 <td contenteditable="true">10</td>
  85.                 <td contenteditable="true">10</td>
  86.                 <td contenteditable="true">10</td>
  87.                 <td contenteditable="true">10</td>
  88.                 <td contenteditable="true">10</td>
  89.                 <td contenteditable="true">10</td>
  90.                 <td contenteditable="true">10</td>
  91.                 <td>250</td>
  92.             </tr>
  93.             <tr>
  94.                 <td>2</td>
  95.                 <td>Jane Smith</td>
  96.                 <td contenteditable="true">10</td>
  97.                 <td contenteditable="true">10</td>
  98.                 <td contenteditable="true">10</td>
  99.                 <td contenteditable="true">10</td>
  100.                 <td contenteditable="true">10</td>
  101.                 <td contenteditable="true">10</td>
  102.                 <td contenteditable="true">10</td>
  103.                 <td contenteditable="true">10</td>
  104.                 <td contenteditable="true">10</td>
  105.                 <td contenteditable="true">10</td>
  106.                 <td>258</td>
  107.             </tr>
  108.             <tr>
  109.                 <td>1</td>
  110.                 <td>John Doe</td>
  111.                 <td contenteditable="true">10</td>
  112.                 <td contenteditable="true">10</td>
  113.                 <td contenteditable="true">10</td>
  114.                 <td contenteditable="true">10</td>
  115.                 <td contenteditable="true">10</td>
  116.                 <td contenteditable="true">10</td>
  117.                 <td contenteditable="true">10</td>
  118.                 <td contenteditable="true">10</td>
  119.                 <td contenteditable="true">10</td>
  120.                 <td contenteditable="true">10</td>
  121.                 <td>250</td>
  122.             </tr>
  123.             <tr>
  124.                 <td>2</td>
  125.                 <td>Jane Smith</td>
  126.                 <td contenteditable="true">10</td>
  127.                 <td contenteditable="true">10</td>
  128.                 <td contenteditable="true">10</td>
  129.                 <td contenteditable="true">10</td>
  130.                 <td contenteditable="true">10</td>
  131.                 <td contenteditable="true">10</td>
  132.                 <td contenteditable="true">10</td>
  133.                 <td contenteditable="true">10</td>
  134.                 <td contenteditable="true">10</td>
  135.                 <td contenteditable="true">10</td>
  136.                 <td>258</td>
  137.             </tr>
  138.             <tr>
  139.                 <td>1</td>
  140.                 <td>John Doe</td>
  141.                 <td contenteditable="true">10</td>
  142.                 <td contenteditable="true">10</td>
  143.                 <td contenteditable="true">10</td>
  144.                 <td contenteditable="true">10</td>
  145.                 <td contenteditable="true">10</td>
  146.                 <td contenteditable="true">10</td>
  147.                 <td contenteditable="true">10</td>
  148.                 <td contenteditable="true">10</td>
  149.                 <td contenteditable="true">10</td>
  150.                 <td contenteditable="true">10</td>
  151.                 <td>250</td>
  152.             </tr>
  153.             <tr>
  154.                 <td>2</td>
  155.                 <td>Jane Smith</td>
  156.                 <td contenteditable="true">10</td>
  157.                 <td contenteditable="true">10</td>
  158.                 <td contenteditable="true">10</td>
  159.                 <td contenteditable="true">10</td>
  160.                 <td contenteditable="true">10</td>
  161.                 <td contenteditable="true">10</td>
  162.                 <td contenteditable="true">10</td>
  163.                 <td contenteditable="true">10</td>
  164.                 <td contenteditable="true">10</td>
  165.                 <td contenteditable="true">10</td>
  166.                 <td>258</td>
  167.             </tr>
  168.             <tr>
  169.                 <td>1</td>
  170.                 <td>John Doe</td>
  171.                 <td contenteditable="true">10</td>
  172.                 <td contenteditable="true">10</td>
  173.                 <td contenteditable="true">10</td>
  174.                 <td contenteditable="true">10</td>
  175.                 <td contenteditable="true">10</td>
  176.                 <td contenteditable="true">10</td>
  177.                 <td contenteditable="true">10</td>
  178.                 <td contenteditable="true">10</td>
  179.                 <td contenteditable="true">10</td>
  180.                 <td contenteditable="true">10</td>
  181.                 <td>250</td>
  182.             </tr>
  183.             <tr>
  184.                 <td>2</td>
  185.                 <td>Jane Smith</td>
  186.                 <td contenteditable="true">10</td>
  187.                 <td contenteditable="true">10</td>
  188.                 <td contenteditable="true">10</td>
  189.                 <td contenteditable="true">10</td>
  190.                 <td contenteditable="true">10</td>
  191.                 <td contenteditable="true">10</td>
  192.                 <td contenteditable="true">10</td>
  193.                 <td contenteditable="true">10</td>
  194.                 <td contenteditable="true">10</td>
  195.                 <td contenteditable="true">10</td>
  196.                 <td>258</td>
  197.             </tr>
  198.             <tr>
  199.                 <td>1</td>
  200.                 <td>John Doe</td>
  201.                 <td contenteditable="true">10</td>
  202.                 <td contenteditable="true">10</td>
  203.                 <td contenteditable="true">10</td>
  204.                 <td contenteditable="true">10</td>
  205.                 <td contenteditable="true">10</td>
  206.                 <td contenteditable="true">10</td>
  207.                 <td contenteditable="true">10</td>
  208.                 <td contenteditable="true">10</td>
  209.                 <td contenteditable="true">10</td>
  210.                 <td contenteditable="true">10</td>
  211.                 <td>250</td>
  212.             </tr>
  213.             <tr>
  214.                 <td>2</td>
  215.                 <td>Jane Smith</td>
  216.                 <td contenteditable="true">10</td>
  217.                 <td contenteditable="true">10</td>
  218.                 <td contenteditable="true">10</td>
  219.                 <td contenteditable="true">10</td>
  220.                 <td contenteditable="true">10</td>
  221.                 <td contenteditable="true">10</td>
  222.                 <td contenteditable="true">10</td>
  223.                 <td contenteditable="true">10</td>
  224.                 <td contenteditable="true">10</td>
  225.                 <td contenteditable="true">10</td>
  226.                 <td>258</td>
  227.             </tr>
  228.             <tr>
  229.                 <td>1</td>
  230.                 <td>John Doe</td>
  231.                 <td contenteditable="true">10</td>
  232.                 <td contenteditable="true">10</td>
  233.                 <td contenteditable="true">10</td>
  234.                 <td contenteditable="true">10</td>
  235.                 <td contenteditable="true">10</td>
  236.                 <td contenteditable="true">10</td>
  237.                 <td contenteditable="true">10</td>
  238.                 <td contenteditable="true">10</td>
  239.                 <td contenteditable="true">10</td>
  240.                 <td contenteditable="true">10</td>
  241.                 <td>250</td>
  242.             </tr>
  243.             <tr>
  244.                 <td>2</td>
  245.                 <td>Jane Smith</td>
  246.                 <td contenteditable="true">10</td>
  247.                 <td contenteditable="true">10</td>
  248.                 <td contenteditable="true">10</td>
  249.                 <td contenteditable="true">10</td>
  250.                 <td contenteditable="true">10</td>
  251.                 <td contenteditable="true">10</td>
  252.                 <td contenteditable="true">10</td>
  253.                 <td contenteditable="true">10</td>
  254.                 <td contenteditable="true">10</td>
  255.                 <td contenteditable="true">10</td>
  256.                 <td>258</td>
  257.             </tr>
  258.         </tbody>
  259.     </table>
  260.  
  261.     <button id="saveButton" onclick="saveData()">Save Data</button>
  262.  
  263. </body>
  264. </html>
  265.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!