CSS--表格自适应宽度并设置最小宽度

2024-07-12 01:32:02
开发
27

原文网址：CSS--表格自适应宽度并设置最小宽度_IT利刃出鞘的博客、-CSDN博客

简介

本文介绍怎样让HTML的表格自适应宽度。

Java技术星球：way2j.com

问题描述

默认样式下，表格会出现某一列很窄的情况：

代码：

<html xml:lang="cn" lang="cn">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="keywords" content="anchor,fixed navigation hide anchor">
    <title></title>
    <style>
        table {
            border: solid 3px black;
            /*边界进行合并。两个合为一个*/
            border-collapse: collapse;
            /*边界的空隙*/
            border-spacing: 0;
        }
        th,td {
            border: solid 1px black;
        }

        /*上边是基础样式，不重要*/
    </style>
</head>

<body>

<div class="container">
    <table>
        <thead>
        <tr>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>
            <th>第四列</th>
            <th>第五列</th>
            <th>第六列</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>第一项</td>
            <td>BBBBBBBBBBBBBB</td>
            <td>可读取其它事务未提交的结果</td>
            <td>√</td>
            <td>√</td>
            <td>√</td>
        </tr>
        <tr>
            <td>第二项</td>
            <td>aaa</td>
            <td><p>一个事务开始时，只能读到其他事务已经提交的修改。 例：如果A事务已经修改了XX，但还没提交，则B事务读XX时还是未修改的值。 （Oracle等多数数据库默认是该级别）。</p>
            </td>
            <td>×</td>
            <td>√</td>
            <td>√</td>
        </tr>
        <tr>
            <td>第三项</td>
            <td>CCC</td>
            <td><p>This level is like REPEATABLE READ, but InnoDB implicitly converts all plain SELECT statements to SELECT … LOCK IN SHARE MODE if autocommit is disabled. If autocommit is enabled,the SELECT is its own transaction. It therefore is known to be read only and can be serialized if performed as a consistent (nonlocking) read and need not block for other transactions.</td>
            <td>×</td>
            <td>×</td>
            <td>√</td>
        </tr>
        </tbody>
    </table>
</div>

</body>

</html>

问题解决

解决方法：设置表格布局为自动，设置单元格的最小宽度：

table {
    table-layout: auto;
}

th,td {
    min-width: 200px;
}

效果：

全部代码：

<html xml:lang="cn" lang="cn">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="keywords" content="anchor,fixed navigation hide anchor">
    <title></title>
    <style>
        table {
            border: solid 3px black;
            /*边界进行合并。两个合为一个*/
            border-collapse: collapse;
            /*边界的空隙*/
            border-spacing: 0;
        }
        th,td {
            border: solid 1px black;
        }

        /*上边是基础样式，不重要*/

        table {
            table-layout: auto;
        }

        th,td {
            min-width: 100px;
        }

    </style>
</head>

<body>

<div class="container">
    <table>
        <thead>
        <tr>
            <th>第一列</th>
            <th>第二列</th>
            <th>第三列</th>
            <th>第四列</th>
            <th>第五列</th>
            <th>第六列</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>第一项</td>
            <td>BBBBBBBBBBBBBB</td>
            <td>可读取其它事务未提交的结果</td>
            <td>√</td>
            <td>√</td>
            <td>√</td>
        </tr>
        <tr>
            <td>第二项</td>
            <td>aaa</td>
            <td><p>一个事务开始时，只能读到其他事务已经提交的修改。 例：如果A事务已经修改了XX，但还没提交，则B事务读XX时还是未修改的值。 （Oracle等多数数据库默认是该级别）。</p>
            </td>
            <td>×</td>
            <td>√</td>
            <td>√</td>
        </tr>
        <tr>
            <td>第三项</td>
            <td>CCC</td>
            <td><p>This level is like REPEATABLE READ, but InnoDB implicitly converts all plain SELECT statements to SELECT … LOCK IN SHARE MODE if autocommit is disabled. If autocommit is enabled,the SELECT is its own transaction. It therefore is known to be read only and can be serialized if performed as a consistent (nonlocking) read and need not block for other transactions.</td>
            <td>×</td>
            <td>×</td>
            <td>√</td>
        </tr>
        </tbody>
    </table>
</div>

</body>

</html>

原文地址:https://blog.csdn.net/feiying0canglang/article/details/131974754 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1811453406880075776.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

CSS--表格自适应宽度并设置最小宽度

简介

问题描述

问题解决

相关推荐

最近更新

热门阅读