导航菜单
首页 >  » 正文

html表格自适应解决方案

    不需要javascript代码,只需要几行css就能解决自适应表格的CSS吗?请看下面的例子:

    你需要做的就是用一个div来包含这个表格:

    <div class="table-container">
    <table>
    ...
    <table>
    </div>
     

    然后添加下面的CSS代码:

    .table-container
    {
    width: 100%;
    overflow-y: auto;
    _overflow: auto;
    margin: 0 0 1em;
    }
     

    演示地址

    为ios添加滚动条

    如果你在iOS下面(如iphone)看这个案例的话,你会看不到滚动条,虽然用户可以滑动表格滚动,但是这是不明显的。我们只需要添加一些额外的CSS就能解决这个问题。

    .table-container::-webkit-scrollbar
    {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    }

    .table-container::-webkit-scrollbar-thumb
    {
    border-radius: 8px;
    border: 3px solid #fff;
    background-color: rgba(000, .3);
    }
     

    演示地址

0.198962s