相关疑难解决方法(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>

我希望表格的宽度为100%,但只有一列可以有一个自由宽度,如:

| A | B | C                                                                  |

因此A和B列的宽度应与其内容的宽度相匹配,但C的宽度应该一直持续到表格结束.

好吧我可以指定A和B的宽度(以像素为单位),但问题是这些列的内容宽度不固定,所以如果我设置一个固定的宽度,它将完全不匹配内容:(

PS:我没有使用实际的表项,而是包含在div中的DL列表.div有display:table,dl有display:table-row,dt/dd display:table-cell ...

我的HTML中有以下表格:

<div style="max-width:700px;">
    <table border="1">
        <tr><td colSpan="2">this is a loooooooooooooooong text</td></tr>
        <tr><td width="1px">a:</td><td >b</td></tr>
        <tr><td width="1px">c:</td><td >d</td></tr>
    </table>
<div>

我希望第二行和第三行中的第一列宽度恰好符合内容长度(这就是我放在width="1px"那里的原因).同时,我希望表宽度恰好适合表中最长内容的长度(这是第一行),而不是跨越到其边界div的最大宽度.

它适用于Firefox,如下所示.

但是,在IE 9中它没有按预期工作,如图所示.

我试图取代width="1px"用width="1%".但是表格宽度将跨越父div的最大宽度.

有谁知道如何在IE中修复它？