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一起使用，因为上面的代码将更改具有此规范的站点中的每个表。

干杯。

Answer 2

要获得简单的解决方案，请在max-width单元中使用ch选项。还有white-space: nowrap-像这样：

table {
  border-collapse: collapse;
  width: 100%
}

td, th {
  max-width: 50ch; /* 50 characters */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #000;
}

<table>
  <tr>
    <th>First Name</th>
    <th>Jason</th> 
  </tr>
  <tr>
    <td>Last Name</td>
    <td>Smith</td> 
  </tr>
  <tr>
    <td>example - lorem ipsum dolor sit amet, consetetur sadipscing elitr , sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</td>
    <td>lorem ipsum dolor sit amet, consetetur sadipscing elitr , sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</td> 
  </tr>
</table>

如何制作一个最小宽度的表格，而又不使数据换行？

2 个答案: