01.2columns-layout-01.html

<!-- 左カラム(固定幅)、右カラム(可変幅) -->
<div class="parent">
  parent
  <table class="sample1">
    <tr>
      <td class="lc">吾輩は猫である</td>
      <td class="rc">吾輩は猫である。名前はまだ無い。<br>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</td>
    </tr>
    <tr>
      <td class="lc">坊っちゃん</td>
      <td class="rc">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</td>
    </tr>
  </table>
</div>

<!-- 左カラム(固定幅)、右カラム(残りの幅) -->
<div class="parent">
  parent
  <table class="sample1 v2">
    <tr>
      <td class="lc">吾輩は猫である</td>
      <td class="rc">吾輩は猫である。<br>名前はまだ無い。</td>
    </tr>
    <tr>
      <td class="lc">坊っちゃん</td>
      <td class="rc">親譲りの無鉄砲で小供の時から損ばかりしている。</td>
    </tr>
  </table>
</div>

02.2columns-layout-01.css

.sample1{
  border-spacing: 0;
}
.sample1 .lc{
  width: 8.5em;
}
.sample1.v2{
  width: 100%;
}
.sample1.v2 .lc{
  vertical-align: top;
}