JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Columns Table</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="table-container">
        <div class="table-fixed">
            <table>
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Row 1 Col 1</td>
                        <td>Row 1 Col 2</td>
                    </tr>
                    <tr>
                        <td>Row 2 Col 1</td>
                        <td>Row 2 Col 2</td>
                    </tr>
                    <!-- Add more rows as needed -->
                </tbody>
            </table>
        </div>
        <div class="table-scroll">
            <div class="table-scroll-inner">
                <table>
                    <thead>
                        <tr>
                            <th>Header 3</th>
                            <th>Header 4</th>
                            <th>Header 5</th>
                            <!-- Add more headers as needed -->
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Row 1 Col 3</td>
                            <td>Row 1 Col 4</td>
                            <td>Row 1 Col 5</td>
                            <!-- Add more columns as needed -->
                        </tr>
                        <tr>
                            <td>Row 2 Col 3</td>
                            <td>Row 2 Col 4</td>
                            <td>Row 2 Col 5</td>
                            <!-- Add more columns as needed -->
                        </tr>
                        <!-- Add more rows as needed -->
                ...

CSS

body {
    font-family: Arial, sans-serif;
}

.table-container {
    display: flex;
    width: 100%;
}

.table-fixed {
    width: 200px; /* Adjust the width as needed */
    overflow: hidden;
}

.table-scroll {
    overflow-x: auto;
    width: calc(100% - 200px); /* Adjust based on fixed table width */
}

.table-scroll-inner {
    min-width: 600px; /* Adjust based on content */
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f4f4f4;
}

.table-fixed th, .table-fixed td {
    background-color: #f9f9f9;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var rows = [
        ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5'],
        ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5'],
        // Add more rows as needed
    ];

    var scrollableTableBody = document.querySelector('.scrollable-table tbody');
    var fixedColumnsTableBody = document.querySelector('.columns-fixed tbody');

    rows.forEach(function(row) {
        var rowHtmlScrollable = '<tr>';
        var rowHtmlFixed = '<tr>';
        row.forEach(function(cell, index) {
            rowHtmlScrollable += '<td>' + cell + '</td>';
            if (index < 2) {
                rowHtmlFixed += '<td>' + cell + '</td>';
            }
        });
        rowHtmlScrollable += '</tr>';
        rowHtmlFixed += '</tr>';
        scroll