Question

我有这张桌子：

<table>
<tr>
    <td style="white-space: nowrap; overflow: hidden;">
         item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1
    </td>
    <td style="white-space: nowrap" >
         item 2 item 2 item 2 item 2 item 2 item 2 item 2 item 2
    </td>
</tr>
</table>

我想要做的是：正确的项目必须获得所有空间。如果左侧有剩余空间，则应将左侧项目剪切为可用长度。

我尝试了overflow: hidden属性，但它不起作用。

P.S。

我不需要省略号

我无法在第1项上使用max-width，因为我希望第2项尽可能多地使用空间

Answer 1

这可能对你有帮助..

 <table>
    <tr>
        <td id='first'>
             item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1
        </td>
        <td id='second>
             item 2 item 2 item 2 item 2 item 2 item 2 item 2 item 2
        </td>
    </tr>
    </table>

    #first{
      display:inline;
      overflow: hidden;
      width:30%;
    }
    #second{
      width:70%;
      }

Answer 2

尝试使用媒体查询，把它放在你的css代码中。

@media only screen and (max-width: 500px) {
    #someid {
        display:none;
    }
}

并在你的html中将相同的id提供给item1

<td id="someid">
         item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1
</td>

此外，您可以根据所需的屏幕尺寸更改max-width，而不是500px。

Answer 3

还有表格样式table-layout:fixed;，在尝试强制单元格宽度时非常有用......

css技巧：https://css-tricks.com/fixing-tables-long-strings/

小提琴：https://jsfiddle.net/prn2tkx6/

Answer 4

将CSS样式编写为

<style>
table{
    table-layout: fixed;
}
td{
    word-wrap:break-word;
}
</style>

溢出时在td元素中剪切文本

4 个答案: