最後更新: 2018-03-27

介紹

CSS Table

css

<style>
    #css_table {
        display:table;
        border: 1px solid black;    // 只外框
    }
    .css_tr {
        display: table-row;
    }
    .css_td {
        display: table-cell;       // 內框
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>

border-collapse: 框與Cell是否分開

html

<div id="css_table">
      <div class="css_tr">
          <div class="css_td">R1C1</div>
          <div class="css_td">R1C2</div>
          <div class="css_td">R1C3</div>
      </div>
      <div class="css_tr">
          <div class="css_td">R2C1</div>
          <div class="css_td">R2C2</div>
          <div class="css_td">R2C3</div>
      </div>
</div>