如何解决停止将Bootstrap表拉伸到全屏宽度并为单元格添加额外的空间
我有一张桌子，可容纳600像素以下的屏幕。当屏幕尺寸大于600px时，表格将增长以填满屏幕，并在每个单元格的右侧为每一列提供很多额外的间距。
如何删除此字符以阻止表增长并删除多余的空间，以便下一列从上一列的最大单元格的末尾开始？
<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>解决方法
您正在使用Bootstrap类，并且Bootstrap .table将表的with设置为width:100%;。您可以从表格HTML中删除table类，那样就可以了-但是它也会影响某些样式。
相反，为了防止表格扩展到整个屏幕宽度（除非需要这样做），您只需将以下内容添加到CSS中：
table.table { width:auto; }
只需确保在Bootstrap CSS的之后包含此内容，不要忘记在CSS选择器中包含.table来覆盖Bootstrap类。
工作示例：
table.table { width:auto;}<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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
