html - 另一个表格内的可滚动表格

Question

这是我编写的一段代码，用于将 2 个表放在一个更大的表中。但我无法修复 <td> 的大小外表的。我想制作 <td>外部表格可滚动，以便我可以在 <td> 中滚动表格外表的:

Fiddle

示例

<table id="maintable">
                    <tr>
                        <td>
                            <table class="smsSecond">
                                <tr style="background-color: #3C3C3C;">
                                    <td colspan="2" width="auto" align="center">
                                        Resolution
                                        <!--img id="delete" src="icons/delete.png" height="10" width="10" style="float: right;"/-->
                                    </td>
                                </tr>

                                <!--odd row-->
                                <tr class="oddrow" align="center">
                                    <td>
                                        Harsha P
                                    </td>
                                    <td>
                                        -NA-
                                    </td>
                                </tr>
                            </table>
                        </td>

                        <td>
                            <table class="smsSecond"><!--bgcolor="#4ab54d"><class="smsSecond"--     this is td bgcolor: bgcolor="#4ab54d"-->
                                <tr style="background-color: #3C3C3C;" >
                                    <td colspan="2" width="auto" align="center">
                                        Ticket Info
                                    </td>
                                </tr>

                                <!--odd row-->
                                <tr class="oddrow" align="center"><!-- style="color: #000000; font-size: 12px;"-->
                                    <td>
                                        Ticket number
                                    </td>
                                    <td>
                                        HFK-864-69976
                                    </td>
                                </tr>


                                <!--even row-->
                                <tr class="evenrow" align="center"><!--style="color: #000000; font-size: 15px; background-color: #FFFFFF" --><!--background-color: #A4EAF6-->
                                    <td>
                                        Department
                                    </td>
                                    <td>
                                        Support
                                    </td>
                                </tr>

                                <!--odd row-->
                                <tr class="oddrow" align="center">
                                    <td>
                                        Priority
                                    </td>
                                    <td>
                                        P3-Normal
                                    </td>
                                </tr>

                                <!--even row-->
                                <tr class="evenrow" align="center">
                                    <td>
                                        Open Date and Time
                                    </td>
                                    <td>
                                        2011-02-28 21:24:01          
                                    </td>
                                </tr>

                                <!--odd row-->
                                <tr class="oddrow" align="center">
                                    <td>
                                        Close Date and Time
                                    </td>
                                    <td>
                                        2011-02-28 21:24:01
                                    </td>
                                </tr>

                                <!--even row-->
                                <tr class="evenrow" align="center">
                                    <td>
                                        Total Time
                                    </td>
                                    <td>
                                        00:03:09
                                    </td>
                                </tr>

                                <!--odd row-->
                                <tr class="oddrow" align="center">
                                    <td>
                                        Ticket Spent
                                    </td>
                                    <td>
                                        00:02:00
                                    </td>
                                </tr>

                                <!--even row-->
                                <tr class="evenrow" align="center">
                                    <td>
                                        No. of staff worked
                                    </td>
                                    <td>
                                        2
                                    </td>
                                </tr>

                                <!--odd row-->
                                <tr class="oddrow" align="center">
                                    <td>
                                        Ticket Status
                                    </td>
                                    <td>
                                        Closed
                                    </td>
                                </tr>

                                <!--even row-->
                                <tr class="evenrow" align="center">
                                    <td>
                                        SLA
                                    </td>
                                    <td>
                                        Yes
                                    </td>
                                </tr>

                                <!--odd row-->
                                <tr class="oddrow" align="center">
                                    <td>
                                        Type
                                    </td>
                                    <td>
                                        Issue
                                    </td>
                                </tr>

                                <!--even row-->
                                <tr class="evenrow" align="center">
                                    <td>
                                        Red Flag
                                    </td>
                                    <td>
                                        0
                                    </td>
                                </tr>

                                <!--odd row-->
                                <tr class="oddrow" align="center">
                                    <td>
                                        Yellow Flag
                                    </td>
                                    <td>
                                        0
                                    </td>
                                </tr>

                                <!--even row-->
                                <tr class="evenrow" align="center">
                                    <td>
                                        Orange Flag
                                    </td>
                                    <td>
                                        0
                                    </td>
                                </tr>

                                <!--odd row-->
                                <tr class="oddrow" align="center">
                                    <td>
                                        Closed by
                                    </td>
                                    <td>
                                        Harsha p
                                    </td>
                                </tr>
                            </table>
                        </td>

                        <td>

                        </td>
                    </tr>

                    <tr>
                        <td>

                        </td>

                        <td>

                        </td>

                        <td>

                        </td>
                    </tr>
                </table>

到目前为止我使用的 CSS 是:

.smsSecond{

    border-radius: 4px;
    padding: 8px 8px 8px 8px;
    /*max-height: 333px;
    overflow: scroll;*/
    font-family:Arial;
    font-size: 12px;
    color: #FFFFFF;
    background-color: #CACACA;
    border: 1px solid black;

    /*background-color: #1AB0EA;*/

}
.smsSecond .oddrow{
    color: #000000;
    font-size: 12px;
}

.smsSecond .evenrow{

    color: #000000;
    font-size: 12px;
    background-color: #FFFFFF;
}

td{
    padding:5px;
    font-size: 13px;
    width: 290px;
    overflow: scroll;
    text-overflow: string;
    white-space: nowrap;    
    border: 1px solid black;
}

tr a{
color: #4EB145;

}
tr a:hover{
color: #4EB145;
text-decoration: none;
font-weight: bolder;
}

要使外部表的字段具有固定大小和可滚动，我应该使用什么？#maintable 的 CSS 属性应该是什么？请帮忙。提前致谢。

Answer 1

您可以将内表包装在 div 中:

HTML:

<div class="inner_wrapper">
    <table ...

CSS:

.inner_wrapper {
    overflow:scroll;
    height: 110px;
}

结果如下:

http://jsfiddle.net/Ye2zV/