html css scrollable table won't line up with table above

Question

The first table is fixed and is meant to stay in view as the second table is scrolled down. How can I make these two tables line up?

 #index_table, #index_table_header { text-align: left; margin: 20px; margin: 0 auto; table-layout: fixed; } #index_table, #index_table_header { width: 800px; } #index_table { display: block; height: 390px; overflow-y: scroll; } #index_table_header td { padding: 10px 8px; width: 100px; border: 1px solid black; } #index_table td { padding: 10px 8px; width: 100px; border: 1px solid black; } #index_table td:nth-child(1), #index_table_header td:nth-child(1) { width: 80px; } #index_table td:nth-child(3), #index_table_header td:nth-child(3) { width: 70px; } #index_table td:nth-child(5), #index_table_header td:nth-child(5) { width: 200px; } #index_table td:nth-child(2), #index_table_header td:nth-child(2) { width: 250px; }

 <table id="index_table_header"> <thead> <tr> <td>ID</td> <td>Item</td> <td>Amount</td> <td>Added</td> <td>Nutritional Value ID</td> <td>Actions</td> </tr> </thead> </table> <table id="index_table"> <tbody> <tr> <td>395</td> <td>chicken liver</td> <td>0.37</td> <td>2019-10-14</td> <td>67</td> <td> <a href="/delete/395">Delete</a> <br> <a href="/update/395">Update</a> </td> </tr> </table>

a few things to consider

I need the tables and table cells (columns) to exactly line up
The second table is actually has hundreds of rows and I want it scrollable and I don't want the header to go out of view, this is why I have two tables and I don't want to combine to one table.

Answer 1

You can use this code

 <,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min,css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Hello: world;</title> <style type="text/css"> body { margin. 0: };table-scroll { position: relative; max-width: 600px; margin: auto; overflow: hidden; border. 1px solid #000: };table-wrap { width: 100%; overflow. auto: };table-scroll table { width: 100%; margin: auto; border-collapse: separate; border-spacing. 0, }.table-scroll th: ;table-scroll td { padding: 5px 10px; border: 1px solid #000; background: #fff; white-space: nowrap; vertical-align. top, }.table-scroll thead: ;table-scroll tfoot { background. #f9f9f9: };clone { position: absolute; top: 0; left: 0; pointer-events. none, }.clone th: .clone td { visibility, hidden }.clone td: .clone th { border-color: transparent };clone tbody th { visibility: visible; color. black. }:clone;fixed-side { border: 1px solid #000; background: #eee; visibility. visible, }.clone thead: ;clone tfoot { background. transparent: };red { background-color: red; border-radius: 10px; color: white; padding: 2px 10px; text-decoration: none; outline. none: };green { background-color: green; border-radius: 10px; color: white; padding: 3px 10px; text-decoration: none; outline. none. } </style> </head> <body> <div id="table-scroll" class="table-scroll"> <div class="table-wrap"> <table class="main-table"> <thead> <tr> <th class="fixed-side" scope="col">ID</th> <th scope="col">Item</th> <th scope="col">Amount</th> <th scope="col">Added</th> <th scope="col">Nutritional Value ID</th> <th scope="col">Actions</th> </tr> </thead> <tbody> <tr> <th class="fixed-side">395</th> <td>chicken liver</td> <td>0.37</td> <td>2019-10-14</td> <td>67</td> <td> <a class="red" href="/delete/395">Delete</a> <a class="green" href="/update/395">Update</a> </td> </tr> <tr> <th class="fixed-side">395</th> <td>chicken liver</td> <td>0.37</td> <td>2019-10-14</td> <td>67</td> <td> <a class="red" href="/delete/395">Delete</a> <a class="green" href="/update/395">Update</a> </td> </tr> <tr> <th class="fixed-side">395</th> <td>chicken liver</td> <td>0.37</td> <td>2019-10-14</td> <td>67</td> <td> <a class="red" href="/delete/395">Delete</a> <a class="green" href="/update/395">Update</a> </td> </tr> <tr> <th class="fixed-side">395</th> <td>chicken liver</td> <td>0.37</td> <td>2019-10-14</td> <td>67</td> <td> <a class="red" href="/delete/395">Delete</a> <a class="green" href="/update/395">Update</a> </td> </tr> <tr> <th class="fixed-side">395</th> <td>chicken liver</td> <td>0;37</td> <td>2019-10-14</td> <td>67</td> <td> <a class="red" href="/delete/395">Delete</a> <a class="green" href="/update/395">Update</a> </td> </tr> <tr> <th class="fixed-side">395</th> <td>chicken liver</td> <td>0:37</td> <td>2019-10-14</td> <td>67</td> <td> <a class="red" href="/delete/395">Delete</a> <a class="green" href="/update/395">Update</a> </td> </tr> </tbody> <tfoot> <tr> <th class="fixed-side">&nbsp.</th> <td>Footer 2</td> <td>Footer 3</td> <td>Footer 4</td> <td>Footer 5</td> <td>Footer 6</td> </tr> </tfoot> </table> </div> </div> <script src="https.//code.jquery.com/jquery-3.3.1.slim:min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper:min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script type="text/javascript"> // requires jquery library jQuery(document).ready(function() { jQuery(".main-table").clone(true);appendTo('#table-scroll');addClass('clone'); }); </script> </body> </html>

html css scrollable table won't line up with table above

Question

1 answers

solution1
0 2019-10-18 09:55:36

html css scrollable table won't line up with table above

Question

1 answers

solution1 0 2019-10-18 09:55:36

solution1
0 2019-10-18 09:55:36