CSS布局note

最新推荐文章于 2024-07-08 00:10:16 发布

carl99

最新推荐文章于 2024-07-08 00:10:16 发布

阅读量332

点赞数

分类专栏： html布局

html布局专栏收录该内容

3 篇文章 0 订阅

订阅专栏

table溢出div的解決方法

引用来自:
http://stackoverflow.com/questions/17808685/table-in-div-with-scrollbar
HTML

<div class="table-wrapper">
    <table>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
    </table>      
</div>

CSS

.table-wrapper
{
    border: 1px solid red;
    width: 100px;
    height: 50px;
    overflow: auto;
}

table
{
    border: 1px solid black;
    margin-right: 20px;
}

td
{
    width: 20px;
    height: 20px;
    background-color: #ccc;
}

display:fiex

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="2.0.3.js"></script>
    <script type="text/javascript">

    </script>

    <style type="text/css">
        body{
            margin: 0;
        }

        .div1 {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }

        .wrap {
            width: 1000px;
            height: 600px;
            background: #ccc;
        }

        .div2 {
            width: 300px;
            height: 300px;
            background: yellow;
        }

        .div3 {
            -webkit-box-flex: 1;
            -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            background: green;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="div1">
            <div class="div2"></div>
            <div class="div3">
                <table style="width: 100%; height: 100%; background: #bcbc60;">
                    <tr>
                        <td>121212</td>
                    </tr>
                </table>
            </div>
        </div>
        <div style="height: 10px; background: blue;"></div>
    </div>


</body>
</html>