css 如何使用百分比设置表格单元格的最大宽度?

2eafrhcq  于 2023-11-19  发布在  其他
关注(0)|答案(5)|浏览(173)
<table>
  <tr>
    <td>Test</td>
    <td>A long string blah blah blah</td>
  </tr>
</table>

<style>
  td {
    max-width: 67%;
  }
</style>

字符串
上面的方法不起作用。如何使用百分比设置表格单元格的max-width

4xrmg8kj

4xrmg8kj1#

老问题我知道,但这是现在可以使用css属性table-layout: fixed上的表标记。回答下面这个问题CSS percentage width and text-overflow in a table cell
使用table-layout: fixed很容易做到这一点,但有点棘手,因为没有多少人知道这个CSS属性。

table {
  width: 100%;
  table-layout: fixed;
}

字符串
在更新的fiddle中查看它的实际操作:http://jsfiddle.net/Fm5bM/4/

z9smfwbn

z9smfwbn2#

根据CSS 2.1规范中对max-width的定义,“'min-width'和'max-width'对表格、内联表格、表格单元格、表格列和列组的影响是未定义的”。所以不能直接在td元素上设置max-width。
如果您只想让第二列最多占67%,那么您可以将宽度(对于表格单元格,这实际上是最小宽度)设置为33%,例如,在示例情况下

td:first-child { width: 33% ;}

字符串
为两列都设置这个值效果不太好,因为它会使浏览器给予相等的列宽。

ktca8awb

ktca8awb3#

我知道这实际上是一年后,但我想我会分享。我试图做同样的事情,并遇到了这个解决方案,为我工作。我们设置了整个表格的最大宽度,然后与所需的效果的单元格大小。
将表格放入自己的div中,然后根据整个表格的需要设置div的宽度,最小宽度和/或最大宽度。然后,您可以为其他单元格设置宽度和最小宽度,并为div设置最大宽度,有效地前后工作以实现我们想要的最大宽度。

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}

.tdleft {
    width:20%;
    min-width:200px;
}

个字符
诚然,这并不能给予一个单元格的“最大”宽度,但它确实允许一些控制,可能会代替这样一个选项。不知道它是否能满足你的需要。我知道它适用于我们的情况,我们希望页面中的导航端向上和向下缩放到一个点,但对于所有的宽屏幕这些天。

fjaof16o

fjaof16o4#

百分比应该是相对于绝对大小的,试试这个:

table {
  width:200px;
}

td {
  width:65%;
  border:1px solid black;
}

个字符

egmofgnx

egmofgnx5#

我找到的解决方案是在td中使用div,并具有以下CSS属性:

max-width: 300px; // Desired max width
width: max-content;

字符串
您可以将另一个td的宽度设置为100%,这将占用表中的剩余空间。

相关问题