Question

我正在尝试使普通表的最后一个正文和标题可滚动。该表包含6列。前5个应固定在它们的位置，以便最后一列应该是可滚动的，但我不知道如何构建它...

这是我到目前为止所做的：

HTML：

<table id="box-table-a">
        <thead>
        <tr>
            <th scope="col">aaa</th>
            <th scope="col">bbb</th>
            <th scope="col">ccc</th>
            <th scope="col">ddd</th>
            <th scope="col">eee</th>
            <th scope="col">fff(very long column very long column very long column very long column very long column very long column very long column very long column very long column very long column very long column very long column very long column very long column very long column very long column very long column very long column very long column )</th>
        </tr>
    </thead>
        <tbody>
            <tr>
                <td>aaa</td>
                <td>bbb</td>
                <td>ccc</td>
                <td>ddd</td>
                <td>eee</td>
                <td>long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text </td>
          </tr>
     </tbody>
</table>

CSS：

        /* ------------------
 styling for the tables 
   ------------------   */


body
{
    line-height: 1.6em;
}


#box-table-a
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 0px;
    white-space: nowrap;
    text-align: left;
    border-collapse: collapse;
}
#box-table-a th
{
    font-size: 13px;
    font-weight: normal;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
    background: #b9c9fe;
    border-top: 0px solid #aabcfe;
    border-bottom: 1px solid #fff;
    color: #039;


}

#box-table-a th:last-child {
    overflow: scroll;
}

#box-table-a td:last-child {

    overflow: scroll;
}
#box-table-a td
{
    padding-top: 0px;
    padding-bottom: 0.0px;
    padding-left: 8px;
    padding-right: 8px;
    background: #e8edff; 
    border-bottom: 0px solid #fff;
    color: #669;
    border-top: 0px solid transparent;
}
#box-table-a tr:hover td
{
    background: #d0dafd;
    color: #339;
}

Answer 1

<tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td>Col 3</td>
            <td>Col 4</td>
            <td>Col 5</td>
            <td width="100px"><div style="overflow-x:auto;width:100px;white-space: nowrap;">col6 col6 col6 col6 ol6 col6</div>  </td>
        </tr>

这个有效！

表中的最后一个标题和列应该是可滚动的

1 个答案: