0

I am working on building a view that has two tables which are side by side inside a scrollable div. Both tables have the same height, and the same number of rows. Currently, both tables scroll together in unison.

What i want, is to have both table headers be sticky and remain visible while scrolling the two table body's in sync.

These tables are displayed inside a angular material mat-dialog window.

Some example code: 

<div mat-dialog-content class="card-content-view-mode">
<div class="container-fluid">
    <div class="row">
        <div class="col-6">
            <div class="table-container">
                <table role="table" class="table leftTable">
                    <thead>
                        <th role="col" style="min-width: 100px;">Col 1</th>
                        <th role="col" style="min-width: 100px;">Col 2</th>
                        <th role="col" style="min-width: 110px;">Col 3</th>
                        <th role="col" style="min-width: 100px;">Col 4</th>
                        <th role="col" style="min-width: 100px;">Col 5</th>
                        <th role="col" style="min-width: 100px;">Col 6</th>
                        <th role="col" style="min-width: 100px;">Col 7</th>
                    </thead>
                    <tbody>
                        <tr *ngFor="...">
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="col-6">
            <div class="table-container">
                <table role="table" class="table rightTable">
                    <thead>
                        <th role="col" style="min-width: 100px;">Col 1</th>
                        <th role="col" style="min-width: 100px;">Col 2</th>
                        <th role="col" style="min-width: 110px;">Col 3</th>
                        <th role="col" style="min-width: 100px;">Col 4</th>
                        <th role="col" style="min-width: 100px;">Col 5</th>
                        <th role="col" style="min-width: 100px;">Col 6</th>
                        <th role="col" style="min-width: 100px;">Col 7</th>
                    </thead>
                    <tbody>
                        <tr *ngFor="...">
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                            <td>...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

My CSS styling so far:

.table-container {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow-x: scroll;
  border-radius: 10px;
}

Is there a simple way with CSS to specify, perhaps with the sticky property, to have both table headers be sticky and remain at the top of the table-container div while scrolling?

So far, i have not been able to find any examples online matching my exact use case, so am turning here for help.

Cody Pritchard
  • 703
  • 2
  • 15
  • 31
  • `table { position: relative; } th { position: sticky; top: 0 }` - though keep in mind the property isn't supported by IE/Edge, cheers. – Chris W. Nov 20 '19 at 22:47
  • @ChrisW. I tried what you said. I believe the property of `stickty: top: 0;` will not work, because the containing div and tables are inside of a modal window. – Cody Pritchard Nov 20 '19 at 22:52

1 Answers1

0

I would think having separate tables for the headers and the bodies. This would result in having 4 different tables. the header tables would have only the 'th' rows and no scrolling, the body tables would be a fixed height and scroll

Something like [How to make Scrollable Table with fixed headers using CSS

Jagjit Singh
  • 21
  • 1
  • 6