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