1

I have created a table in html with a scrollbar but the th tags also scroll. I want the th tags to be fixed. I tried looking at different sources but it didn't help me with my situation.

.table_wrapper {
        max-height: 200px;
        overflow: auto;
        table-layout: fixed;
        display: inline-block;
    }

this is the css of the table

here is the table code

 <div class="table_wrapper">
            <div class="container" id="user_data1">
                <table class="table table-striped table-bordered table-fixed" id="user_data">
                    <tbody>
                        <tr>
                            <th>Brand</th>
                            <th>Product</th>
                            <th>Model</th>
                            <th>Serial Number</th>
                            <th>Qty</th>
                            <th>Price</th>
                            <th>Environment Fee</th>
                            <th>Amount Fee</th>
                            <th>Amount</th>
                            <th>View</th>
                            <th>Delete</th>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

the td tag is being created from a js file

js file code

output = '<tr id="row_' + count + '">';
            output += '<td>' + Brand + ' <input  type="hidden" name="hidden_Brand[]" id="Brand' + count + '" class="Brand" value="' + Brand + '" /></td>';
            output += '<td>' + Product + ' <input type="hidden" name="hidden_Product[]" id="Product' + count + '" value="' + Product + '" /></td>';
            output += '<td>' + Model + ' <input type="hidden" name="hidden_Model[]" id="Model' + count + '" value="' + Model + '" /></td>';
            output += '<td>' + Serial_Number + ' <input type="hidden" name="hidden_Serial_Number[]" id="Serial_Number' + count + '" value="' + Serial_Number + '" /></td>';
            output += '<td>' + Qty + ' <input type="hidden" name="hidden_Qty[]" id="Qty' + count + '" value="' + Qty + '" /></td>';
            output += '<td>' + Price + ' <input type="hidden" name="hidden_Price[]" id="Price' + count + '" value="' + Price + '" /></td>';
            output += '<td>' + Env_Fee + ' <input type="hidden" name="hidden_Env_Fee[]" id="Env_Fee' + count + '" value="' + Env_Fee + '" /></td>';
            output += '<td>' + Amount_Fee + ' <input type="hidden" name="hidden_Amount_Fee[]" id="Amount_Fee' + count + '" value="' + Amount_Fee + '" /></td>';
            output += '<td>' + Amount + ' <input type="hidden" name="hidden_Amount[]" id="Amount' + count + '" value="' + Amount + '" /></td>';
            output += '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="' + count + '">View</button></td>';
            output += '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="' + count + '">Remove</button></td>';
            output += '</tr>';
            $('#user_data').append(output);

Now I don't know how to make the th tag be fixed. I only want the data to move.

Zain Ahmad
  • 11
  • 1
  • `table-layout` is for Elements with `display:table;` or ``s themselves. No, you should not make that wrapper a table. You can probably just get rid of the wrapper, depending on your styling. `.table_wrapper{ max-height: 200px; }` will only allow the height to be 200px. Tags to be "fixed"? Web programmers only say that when referring to `position:fixed;`, which would be fixed to the viewport... probably no what you want. Please explain more clearly.
     – StackSlave Jan 15 '21 at 01:17
  • I want the headings to be fixed. So when I scroll the table I don't want the headings to allow scroll. only the data. So where do I use the position:fixed. Thanks To StackSlave – Zain Ahmad Jan 15 '21 at 01:21
  • 1
    You can checkout this question: https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body . It has a way to fix the header while scrolling the data. – Rich DeBourke Jan 15 '21 at 01:33

0 Answers0