另一个表内的可滚动表

时间:2014-01-24 09:43:36

标签: html css

这是我编写的一段代码,用于将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属性? 请帮忙。 提前谢谢。

2 个答案:

答案 0 :(得分:2)

您可以将内部表格包裹在div

<强> HTML:

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

<强> CSS:

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

结果如下:

http://jsfiddle.net/Ye2zV/

答案 1 :(得分:1)

您可以在div中添加您的整个代码并添加heightoverflow:auto;

小提琴:

http://jsfiddle.net/2nu5Q/

希望它有助于交配。

比尔。