Ton*_*ony 5 html css bootstrap-4
我有一张适合最大 600 像素屏幕的表格。当屏幕尺寸大于 600 像素时，表格会增大以填满屏幕，并在每个单元格右侧为每列提供大量额外间距。
如何删除此阻止表格增长并删除多余的不需要的空间，以便下一列从上一列中最大单元格的末尾开始？
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
</head>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Stat</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Highest Money Reached</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>代码也在这个JsFiddle上
您正在使用 Bootstrap 类，并且 Bootstrap.table将表的 with 设置为width:100%;。您可以从 HTML 表中删除该类table，这将是您的 - 但它也会影响一些样式。
相反，为了防止表格拉伸到全屏宽度（除非需要），您只需将以下内容添加到 CSS 中：
table.table { width:auto; }
只需确保它包含在 Bootstrap CSS之后，并且不要忘记.table在 CSS 选择器中包含 来覆盖 Bootstrap 类。
工作示例：
table.table { width:auto; }
table.table { width:auto;}