1. 程式人生 > >當表格列數太多時,怎麽實現表格的橫向滾動

當表格列數太多時,怎麽實現表格的橫向滾動

html cnblogs eight tab scroll table .cn div ext

效果:

技術分享

要點:在表格外加一層div,div寬固定

html:

          <div class="project-tests">
            <table>
              <tr v-for="arr in projectTests" v-bind:key="arr[0]">
                <td v-for="item in arr" v-bind:key="item">{{item}}</td>
              </tr>
            </table
> </div>

postcss:

div.project-tests {
    width: 100%;
    overflow-x:scroll;
    & table {
        border-collapse:collapse;
        & tr {
            height: 40px;
            &:nth-child(odd) {
                background-color: #FAFAFA;
            }
            &:first-child 
{ background-color: #EEF1F6; } &:hover { background-color: #EEF1F6; } } & td { border: 1px solid #DFE6EC; padding:8px; white-space:nowrap; text-overflow: ellipsis
; } } }

當表格列數太多時,怎麽實現表格的橫向滾動