Question

我有一个有3列的固定宽度表。我希望第一列基于文本调整大小，第二列是固定宽度，第三列应该占用空间的剩余部分并截断任何不适合单元格的部分（文本溢出：省略号）。该表只是单行。

这是我桌子的简化版......

<table>
    <tr>
        <td>250.9</td>
        <td> | </td>
        <td>This is really long and should be truncated</td>
    </tr>
</table>

第1列是1到250之间的十进制数，单精度小数。第二列只是第一列和最后一列之间的分隔符。第3列是用户输入的标题，可以很长，但通常适合所提供的空间。

这是一个小提琴项目，展示了我尝试过的一件事：http://jsfiddle.net/A4N2z/2/

我也试过了一组浮动的div，但是如果它不适合，最后一个div会换行到下一行：http://jsfiddle.net/5Epvw/1/

因为它只是一行，所以如果有人知道另一种方法，它就不必是一个表。目标是将文本排成一行，并且不要宽于某个宽度。

Answer 1

您可以使用此代码块（您可以根据需要更改容器的宽度）

<div id="container">
    <div class="nbr">1.2.3</div >
    <div class="sep"> | </div >
    <div class="title">This is a really long title</div >
</div>

#container
{
    width:500px;
}

#container div
{
    display:inline-block;
}

Answer 2

最后我使用了一个表并根据字符截断了标题（我能找到的最佳解决方案）。我使用Sugar.js在客户端上进行实际的截断，因为值是动态的，Sugar的truncate方法非常聪明地截断字符串。

如何允许单个表格单元格在固定表格布局中展开？

2 个答案: