table的fixed布局

最新推荐文章于 2024-08-27 14:12:16 发布

zbailing

最新推荐文章于 2024-08-27 14:12:16 发布

阅读量969

点赞数

分类专栏： CSS 文章标签： elementui linq 蓝桥杯

本文链接：https://blog.csdn.net/zbailing/article/details/122492790

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 10px 300px;
        }
        table.one {
            table-layout: fixed;
        }

        table.two {
            table-layout: fixed;
        }
    </style>
</head>
<body>

<table class="one" border="1" width="100%">
    <thead>
    <tr>
        <th style="width: 20%;">1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    </thead>
    <tr>
        <td>1000000000000000000000000000</td>
        <td>10000000</td>
        <td>100</td>
    </tr>
    <tr>
        <td>1000000000000000000000000000</td>
        <td>10000000</td>
        <td>100</td>
    </tr>
</table>

<br/>

<table class="two" border="1" width="100%">
    <thead>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    </thead>
    <tr>
        <td style="width: 20%;">1000000000000000000000000000</td>
        <td>10000000</td>
        <td>100</td>
    </tr>
    <tr>
        <td>1000000000000000000000000000</td>
        <td>10000000</td>
        <td>100</td>
    </tr>
</table>

</body>
</html>

效果图