html - 如何在没有数据进入新行的情况下制作最小宽度的表格？

Question

我有一个包含数据的表格。但是，每个单元格中的字符串长度不同。我知道数据永远不会超过 50 个字符。我怎样才能制作尽可能小的宽度表。我试过以百分比设置 with 但这只会使它成为屏幕的百分比。如果我设置一个像素宽度，则字符串会溢出到一个新行中。

<style>
table {
    width: 100%;
    border: 1px solid #000;
}

td, th {
    width: 100%;
    border: 1px solid #000;
}
</style>

<table>
    <tr>
        <th>First Name</th>
        <th>Jason</th> 
    </tr>
    <tr>
        <td>Last Name</td>
        <td>Smith</td> 
    </tr>
    <tr>
        <td>Country</td>
        <td>Australia</td> 
    </tr>
</table>

Answer 1

https://jsbin.com/hodusadike/edit?html,output

试试上面的例子。保持表格的 table-layout: auto !important; 和 width: auto !important; 将为您提供所需的结果。我还没有在 Firefox 或 IE 上尝试过(在 Chrome 和 Safari 上运行良好)。

我建议将它与 .class 或 #id 一起使用，因为上面的代码将根据此规范更改您站点中的每个表。

干杯。