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

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>

这个有效！