如何设置HTML页面自适应宽度的table

 我来答
育知同创教育
2016-08-08 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
展开全部

设置HTML页面自适应宽度的table的方法:

1、定义html页面table代码:

<div class="content">

    <div class="content-header">


    </div>

    <div class="content-loader">

        <table>

            <tbody>

                <tr>

                    <td>First Name</td>

                    <td>Last Name</td>

                    <td>Gender</td>

                    <td>Birth Date</td>

                    <td>Address</td>

                    <td>Zip Code</td>

                    <td>Nationality</td>

                    <td>Contact Number</td>

                    <td>Email</td>

                    <td>Username</td>

                    <td>Course</td>

                    <td>Year</td>

                    <td>ID Number</td>

                    <td>Subjects</td>

                </tr>

            </tbody>

        </table>

    </div>

</div>


2、控制表格自适应的样式css代码:

.content {

    width: 1100px;

    height: 200px;

    background: #fdfdfd;

    margin: 0px auto;

    position: relative;

    top: 40px;

    border: 1px solid #aaaaaa;

}


.content .content-header {

    width: 100%;

    height: 40px;

    background-color:#aaa;

    background-image:-moz-linear-gradient(top,#eeeeee,#cccccc);

    background-image:-webkit-gradient(linear,0 0,0 100%,from(#eeeeee),to(#cccccc));

    background-image:-webkit-linear-gradient(top,#eeeeee,#cccccc);

    background-image:-o-linear-gradient(top,#eeeeee,#cccccc);

    background-image:linear-gradient(to bottom,#eeeeee,#cccccc);

    border-bottom: 1px solid #aaaaaa;

}


.content-loader {

    overflow: scroll;

}

.content-loader table {

    width: auto;

    background: #aaa;

}


.content-loader table tr {

    background: #eee;

}


.content-loader tr td {

    white-space: nowrap;

}

3、完整代码如下:

<html>

<style>

.content {

    width: 800px;

    height: 200px;

    background: #fdfdfd;

    margin: 0px auto;

    position: relative;

    top: 40px;

    border: 1px solid #aaaaaa;

}


.content .content-header {

    width: 100%;

    height: 40px;

    background-color:#aaa;

    background-image:-moz-linear-gradient(top,#eeeeee,#cccccc);

    background-image:-webkit-gradient(linear,0 0,0 100%,from(#eeeeee),to(#cccccc));

    background-image:-webkit-linear-gradient(top,#eeeeee,#cccccc);

    background-image:-o-linear-gradient(top,#eeeeee,#cccccc);

    background-image:linear-gradient(to bottom,#eeeeee,#cccccc);

    border-bottom: 1px solid #aaaaaa;

}


.content-loader {

    overflow: scroll;

}

.content-loader table {

    width: auto;

    background: #aaa;

}


.content-loader table tr {

    background: #eee;

}


.content-loader tr td {

    white-space: nowrap;

}

</style>

<body>

<div class="content">

    <div class="content-header">


    </div>

    <div class="content-loader">

        <table>

            <tbody>

                <tr>

                    <td>First Name</td>

                    <td>Last Name</td>

                    <td>Gender</td>

                    <td>Birth Date</td>

                    <td>Address</td>

                </tr>

                <tr>

                    <td>greennndddgreennndddgreennnddd</td>

                    <td>Mnddsdsdsweeweewrewrewrwerew</td>

                    <td>female</td>

                    <td>1999-09-08</td>

                    <td>jskfksdfsdflsdf;sldfsdkflsdfksdfkdsfldslf</td>

                </tr>

            </tbody>

        </table>

    </div>

</div>


</body>

</html>

4、运行效果如下:

表格的宽度随着内容的变化而变化。

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式