相关疑难解决方法(0)

在下面的HTML片段中,如何使包含"LAST"的列的宽度占据行的其余部分,并且包含"COLUMN ONE"和"COLUMN TWO"的列的宽度足够宽以包含其内容,而不是更大.

谢谢

table {
  border-collapse: collapse;
}
table td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>
      <table width="100%">
        <tr>
          <td>
            <span>
             COLUMN
           </span>
            <span>
             ONE
           </span>
          </td>
          <td>
            COLUMN TWO
          </td>
          <td>
            LAST
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      ANOTHER ROW
    </td>
  </tr>

</table>

我现在尝试了几件事(并在这里看了看),到目前为止没有任何工作.所以我要问.

我想要的是:

我有以下简单的HTML:

<table>
  <tr>
    <td class="small">First column with text</td>
    <td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>
    <td class="small">Small column</td>
  </tr>
</table>

表本身应该是父容器的100%宽度.我希望第一个和最后一个列(.small)尽可能大,所以内容可以适应它而不需要换行(所以几乎white-space: nowrap可以).中间列(.extend)应该占用剩余的空间(因此表将保持在其父容器的100%宽度内),并且内部文本.extend应该在需要中断到秒行之前省略.

我在http://jsfiddle.net/3bumk/准备了一个小提琴

有了这些背景颜色,我希望得到如下结果:

这有什么解决方案吗？

我得到了什么:

我的问题是,如果我可以使文本保持在一行(没有换行符),表将始终溢出其父容器宽度(并使其可滚动),然后才有想法省略文本中的文本中间栏.

什么是解决方案(我经常发现):

将第一列和第三列设置为"固定"(百分比或像素)是没有办法的,因为内容会不时地具有不同的长度.它可以添加尽可能多div或span根据需要(或摆脱表的所有一起-我的第一次尝试,有display和table,但我没有找到一个有效的解决方案这种方式要么).

PS:如果你能够编辑一个有效的例子,如果你知道一个,这将是非常好的:-)

编辑我也可以自由使用div而不是表格!

我有一张带一个TR和两个TD的桌子。我希望第一个TD根据其内容自动调整宽度，第二个TD用尽其余的宽度。

这就是我所拥有的：

<table style="width: 100%;">
  <tr>
    <td>short content</td>
    <td>long content</td>
  </tr>
</table>

整个表的宽度是100％（如我所愿），但是我不知道如何调整TD宽度来实现我的目标。