More than 5 years have passed since last update.

【HTML】固定・可変の2カラム

Posted at 2017-09-30

html

<div class="fix-flex">
  <div class="fix">
    固定
  </div>
  <div class="flex">
    可変
  </div>
</div>

css

.fix-flex {
  display: table;
  width: 100%;
}

.fix, .flex {
  display: table-cell;
}

.fix {
  width: 100px;
}

固定カラムの横幅を変えたいとき

<div class="fix-flex">
  <div class="fix" style="width: 200px">
    固定
  </div>
  <div class="flex">
    可変
  </div>
</div>