I need some area scroll-bar in table?

Please find the image and you can view the Jan and Dec column, I need to place a sc开发者_运维技巧roll bar for that two column in the sense two column space area has Jan to Dec months.

This is possible for table?

Please help me!

Above Question got very good answer.

another Help!

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

please find the image and you can view the (vendor 1 quote) and (vendor 6 quote) column, I need to place a scroll bar for that two column in the sense two column space area has (vendor 1 quote)to (vendor 6 quote) vendor details

I do not believe this is possible. I tried by styling a colgroup but this didn't work.

Example of tried solution.

The only other way I think to do it is splitting your table up into three separate tables with a wrapper div on the middle one.

Example of split up table with div separator.

try this:

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

demo

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

You can fiddle with the CSS to get the same style easily.

::EDIT:: Cleaned up code and updated fiddle to include some space for the scroll bar.