2

I need to have scrollable tbody. For that reason i putted two tables one for thead and for one tbody.

But i can't find a way to make this two tables have same width.

I know that there are a lot of solutions out there for making these with one table but none of them is working fine - because i need to have thead with bakground - color - the other solutions have width until the scroll bar on the right and that is not what i want


<table>
    <thead>
        <tr>
            <th class="red">
                Header 1
            </th>

            <th class="red">
                Header 2
            </th>

            <th class="red">
                Header 3
            </th>
            <th class="red">
                Header 4
            </th>

            <th class="red">
                Header 5
            </th>
        </tr>
    </thead>
</table>

<table>
    <tbody>
        <tr>
            <td class="red">Content 1</td>
            <td class="red">Content 2</td>
            <td class="red">Content 3</td>
            <td class="red">Content 4</td>
            <td class="red">Content 5</td>
        </tr>
        
        <tr>
            <td class="red">Content 1</td>
            <td class="red">Content 2</td>
            <td class="red">Content 3</td>
            <td class="red">Content 4</td>
            <td class="red">Content 5</td>
        </tr>

        <tr>
            <td class="red">Content 1</td>
            <td class="red">Content 2</td>
            <td class="red">Content 3</td>
            <td class="red">Content 4</td>
            <td class="red">Content 5</td>
        </tr>

        <tr>
            <td class="red">Content 1</td>
            <td class="red">Content 2</td>
            <td class="red">Content 3</td>
            <td class="red">Content 4</td>
            <td class="red">Content 5</td>
        </tr>


        <tr>
            <td class="red">Content 1</td>
            <td class="red">Content 2</td>
            <td class="red">Content 3</td>
            <td class="red">Content 4</td>
            <td class="red">Content 5</td>
        </tr>
       
    </tbody>
</table>

tbody {
    display: block;
    height: 50px;
    overflow-y: scroll;
}

table {
    border:1px solid red;
}

.red {
    border:1px solid red;
}
peckoski
  • 105
  • 6

1 Answers1

0

Table fixed header and scrollable body

https://www.geeksforgeeks.org/how-to-create-a-table-with-fixed-header-and-scrollable-body/

try one of these

PLease make it one table not two

sojin
  • 2,158
  • 1
  • 10
  • 18
  • As i said the solutions you provided are with scrollbar on whole table - not only the tbody as i need – peckoski Sep 13 '21 at 08:43
  • No, check the links both links is giving examples of a fixed header and scrollable body – sojin Sep 13 '21 at 08:57
  • You don't understand. Scrollable tbody starts from the body itself, not from the top from the table – peckoski Sep 13 '21 at 09:01
  • On the lunks you priovided - on the right from the table headers there is scrollbar, i don't need that scrollabr right from the table headers - i need him just from the tbody – peckoski Sep 13 '21 at 09:02