CSS--表格自適應寬度并設置最小寬度

原文網址：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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/43026.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/43026.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/43026.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！