html - CSS 表格列宽：固定 - 动态（30%） - 动态（70%） - 固定

Question

我设法获得了这种表格布局：

固定 - 动态 (50%) - 动态 (50%) - 固定

http://jsfiddle.net/ihtus/ksuU/

但是我怎样才能得到这种？固定 - 动态 (30%) - 动态 (70%) - 固定

这是我的CSS：

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

td {
    border: 1px solid #333;
}

Answer 1

像这样：

<table>
    <tr>
      <td style="width:200px;">
        200px width - content
      </td>
      <td width="30%">
        dynamic width - content
      </td>
      <td width="70%">
        dynamic width - content
      </td>
      <td style="width:100px;">
         100px width - content
      </td>
    </tr>
  </table>

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

td {
    border: 1px solid #333;
}

http://jsfiddle.net/7dSpr/

Answer 2

一般方法与 Monkieboy 使用的方法相同，但应避免使用内联样式。（我的意思是写style="someting"）在你的 html 文件中。您应该改用类和 CSS。

首先给 td 一个这样的类<td class="thin-column">text here</td>，然后在你的 CSS 中使用它来应用样式：.thin-column:{ width: 30% }