Question

我希望表格列使用最小的位置但是在一定宽度之后，它应该换行这就是我所拥有的：

<table id="#table">
    <tr>
        <td>Content with a fix with</td>
        <td class="min">This content should only use the necessary place but wrap after 200px</td>
    </tr>
</table>

<style>
#table{
     width: 100%;
}
.min {
    width: 1%;
    white-space: nowrap;
}
</style>

这使得列只使用它需要的地方，但是它太长了，它会使表无限长，我想设置允许空间的最大值。

编辑：我认为使用js可以计算宽度并更改css但我更喜欢没有javascript或jquery的解决方案。

编辑2：我忘了提到该表的宽度为100％。因此，如果我按照给定的答案，表格单元格的自动宽度（太宽）和最大宽度，所以如果文本很短，则td有一个我不想要的空格。

编辑3：这是一张比我更好解释的图片。

#billTable{
    width:100%;
}
#numberTd{
    text-align: center;
    width:18%;
}
#weightTd{
    text-align: center;
    width:20%;
}
#nameTd{
    text-align: left;
    width: 1%;
    white-space: nowrap;
}
#kgPriceTd{
    text-align: right;
    width:20%;
}
#priceTd {
    text-align: right;
}

<div style="width:550px;">
    <table>
        <tr>
            <th id='numberTd'>Packetzahl</th>
            <th id='weightTd'>Kg</th>
            <th id='nameTd'>Artikel</th>
            <th id='kgPriceTd'>CHF / Kg</th>
            <th id='priceTd' colspan="2">Total</th>
        </tr>
        <tr>
            <td id='numberTd'>1</td>
            <td id='weightTd'>0.688</td>
            <td id='nameTd' class='min'>Siedfleisch</td>
            <td id='kgPriceTd'>44.00</td>
            <td id='priceTd'>8.2</td>
        </tr>
    </table>
</div>

Answer 1

您可以使用max-width

控制元素的最大宽度

https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

max-width CSS属性设置元素的最大宽度。它可以防止width属性的used值大于max-width指定的值。

＆＃13;

.min {

        max-width: 200px;
    }

＆＃13;

<table>
    <tr>
        <td>Content with a fix with</td>
        <td class="min">This content should only use the necessary place but wrap after 200px</td>
    </tr>
</table>

＆＃13;

您可以为灵活列应用宽度百分比，将其展开以使其看起来不错或使您的表格不是100％

Answer 2

使用CSS属性“max-width”。我附上了一个带有边框的示例，其中显示了这一点。

  table, td {
    border:1px solid #555;
    border-collapse:collapse;
  }
  .min {  
    max-width:200px;
  }

<table>
    <tr>
        <td>Content with a fix with</td>
        <td class="min">This content should only use the necessary place but wrap after 200px</td>
    </tr>
</table>

如何使表格列为最小宽度但具有最大宽度

2 个答案: