我需要表格中的一些区域滚动条吗？答案

【问题标题】：I need some area scroll-bar in table?我需要表格中的一些区域滚动条吗？
【发布时间】：2019-01-20 18:23:21
【问题描述】：

请找到图片，您可以查看 Jan 和 Dec 列，我需要为这两列放置一个滚动条，因为两列空间区域具有 Jan 到 Dec 月份。

这对桌子有可能吗？

请帮帮我！

上面的问题得到了很好的答案。

另一个帮助！

http://jsfiddle.net/anglimass/Ty29z/

请找到图片，您可以查看（供应商 1 报价）和（供应商 6 报价）列，我需要在两列空间区域具有（供应商 1 报价）的意义上为这两列放置一个滚动条（供应商6报价）供应商详情

【问题讨论】：

好吧，我的问题可能与否？
老实说，我能想到的唯一方法是使用 colgroup 类，但这根本不起作用，所以我认为答案是否定的。 jsfiddle.net/Kyle_Sevenoaks/zAVfy

标签： html css html-table

【解决方案1】：

我不相信这是可能的。我尝试通过设置 colgroup 的样式，但这没有用。

Example of tried solution.

我认为唯一的另一种方法是将您的表格分成三个单独的表格，中间有一个包装 div。

Example of split up table with div separator.

【讨论】：

干得好，我想把这件作品放在桌子上，因为你再看一次我的照片。它带有 colspan 和 100% 的整体宽度。

【解决方案2】：

试试这个：

HTML

<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th colspan="1" rowspan="5" style="border: medium none ; width: 100px; vertical-align: top;">
            <div class="inner-table">
                <table style="text-align: left; width: 500px; border:none" border="1" cellpadding="2" cellspacing="2">
                <tbody>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                        <th>Header 4</th>
                    </tr>
                    <tr>
                        <td>a</td>
                        <td>a</td>
                        <td>a</td>
                        <td>a</td>
                    </tr>
                    <tr>
                        <td>b</td>
                        <td>b</td>
                        <td>b</td>
                        <td>b</td>
                    </tr>
                    <tr>
                        <td>c</td>
                        <td>c</td>
                        <td>c</td>
                        <td>c</td>
                    </tr>
                </tbody>
                </table>
            </div>
        </th>
        <th>Header 4</th>
    </tr>
    <tr>
        <td>a</td>
        <td>a</td>
        <td>a</td>
    </tr>
    <tr>
        <td>b</td>
        <td>b</td>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
        <td>c</td>
        <td>c</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</tbody>
</table>

CSS

.inner-table {
    width:100px;
    overflow-x:scroll;
}

th {
    height:20px;
}

演示

http://jsfiddle.net/andresilich/caq8F/4/

您可以通过调整 CSS 来轻松获得相同的样式。

::EDIT:: 清理代码并更新小提琴以包含滚动条的一些空间。

【讨论】：

请看图片，（预算表和账户说明）