html - 我怎样才能使我的 td 和 th 具有相同的宽度 - 包括仅放在 tbody 上的滚动条？

问题描述

我需要有可滚动的 tbody。出于这个原因，我放了两张桌子，一张用于thead，一张用于tbody。

但我找不到让这两个表具有相同宽度的方法。

我知道有很多解决方案可以用一张桌子制作这些，但它们都不能正常工作 - 因为我需要有 bakground - 颜色 - 其他解决方案的宽度直到右边的滚动条和那个不是我想要的


<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;
}

标签： htmlcss

html - 我怎样才能使我的 td 和 th 具有相同的宽度 - 包括仅放在 tbody 上的滚动条？

问题描述

解决方案

推荐阅读