html - 可滚动表格内容 html/css

Question

我试图使我的表格内容可滚动，我必须在其中一个表格行内创建一个表格，这意味着如果表格有多于一行，则内容不会与显示的正确标题对齐在 fiddle 中；

https://jsfiddle.net/f5ax5w2r/

thead.panel-heading {
    background-color: #242a30;
    border-color: #242a30;
    border-bottom: 1px solid #242a30;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: move;
    width: 100%;
}
thead.panel-heading tr th {
    color: #ffffff;
    font-weight: 500;
    padding: 10px 40px !important;
    text-align: left;
}
tbody.panel-content {
    background-color: #f0f3f4;
}
tbody.panel-content tr td {
    padding: 10px 20px !important;
    text-align: left;
}
tbody div {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 300px;
}

<table>
    <thead class="panel-heading">
        <tr>
            <th>Client</th>
            <th>Client</th>
        </tr>
    </thead>
    <tbody class="panel-content">
        <tr>
            <td>
                <div class="scrollit">
                    <table>
                        <tr>
                            <td>Alex Best</td>
                            <td>Yahoo Answers</td>
                        </tr>
                        <tr>
                            <td>Andrew Smith</td>
                            <td>Monkey Tube</td>
                        </tr>
                        <tr>
                            <td>James Harris</td>
                            <td>Limewire</td>
                        </tr>
                        <tr>
                            <td>Mike Anderson</td>
                            <td>Twitter</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

您的代码中每个表格行中的表格单元格数量不匹配。添加正确的 colspan 值应该可以做到这一点。

thead.panel-heading {
    background-color: #242a30;
    border-color: #242a30;
    border-bottom: 1px solid #242a30;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: move;
    width: 100%;
}
thead.panel-heading tr th {
    color: #ffffff;
    font-weight: 500;
    padding: 10px 40px !important;
    text-align: left;
}
tbody.panel-content {
    background-color: #f0f3f4;
}
tbody.panel-content tr td {
    padding: 10px 20px !important;
    text-align: left;
}
tbody div {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 300px;
}

<table>
    <thead class="panel-heading">
        <tr>
            <th>Client</th>
            <th>Client</th>
        </tr>
    </thead>
    <tbody class="panel-content">
        <tr>
            <td colspan="2">
                <div class="scrollit">
                    <table>
                        <tr>
                            <td>Alex Best</td>
                            <td>Yahoo Answers</td>
                        </tr>
                        <tr>
                            <td>Andrew Smith</td>
                            <td>Monkey Tube</td>
                        </tr>
                        <tr>
                            <td>James Harris</td>
                            <td>Limewire</td>
                        </tr>
                        <tr>
                            <td>Mike Anderson</td>
                            <td>Twitter</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>