html - CSSテーブルの列幅：固定-動的（30％）-動的（70％）-固定

Question

私はなんとかこの種のテーブルレイアウトを手に入れることができました：

固定-動的（50％）-動的（50％）-固定

http://jsfiddle.net/ihtus/ksucU/

しかし、どうすればこの種を入手できますか？固定-動的（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% }