如何使<table> </table>均匀显示不同的项目？

Question

我制作了一个包含HTML和CSS的简单表格，但是，当您调整浏览器大小时，这些项目无法均匀显示。

截图：

如您所见，有很多空白区域。

无论用户如何调整浏览器的大小，我怎样才能使这三行在div框中均匀显示？

我做了一个jsfiddle： https://jsfiddle.net/5nm9m9pL/（在浏览浏览器之前看起来很好）

代码： HTML

<div class="bet-ids" id="bet-ids">
    <table>
        <tr>
            <th>Username</th>
            <th>ID</th>
            <th>Profit</th>
        </tr>
        <tr>
            <td>bitcoincryptopro</td>
            <td>232</td>
            <td>+0.32423</td>
        </tr>
        <tr>
            <td>bitcoincryptopro</td>
            <td>523</td>
            <td>+0.32423</td>
        </tr>
        <tr>
            <td>bitcoincryptopro</td>
            <td>4352</td>
            <td>+0.32423</td>
        </tr>
        <tr>
            <td>bitcoincryptopro</td>
            <td>5234</td>
            <td>+0.32423</td>
        </tr>
    </table>
</div>

CSS：

.bet-ids {
        height: auto;
        padding: 20px;
        width: 60%;
        font-family: Helvetica Neue;
        color: black;

        background-color: white;
    }

Answer 1

如果通过“大量空格”表示您希望将其居中，那么您可以向margin: auto和table添加div，因为您{{1}固定宽度为60％

否则，如果你的意思是想伸展桌子，那么显然你不能有60％的宽度;

div

.bet-ids {
        height: auto;
        padding: 20px;
        width: 60%;
        margin:auto;
        font-family: Helvetica Neue;
        color: black;

        background-color: white;
    }
    
 table {
  margin: auto;
 }

Answer 2

只需将.bet-ids table {width: 100%;}添加到CSS中：除非您另行说明，否则表格会根据其内容设置宽度。