Table

最後更新: 2018-03-27

介紹

 


CSS Table

 

css

<style>
    #css_table {
        display:table;
    }
    .css_tr {
        display: table-row;
    
    }
    .css_td {
        display: table-cell;
        border: 1px solid #1C6EA4;    
    }
</style>

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>

 


Border

 

<style>
    #css_table {
          display:table;
          border: 1px solid #1C6EA4;    // 只外框
      }
    .css_tr {
          display: table-row;
      
      }
    .css_td {
          display: table-cell;
          border: 1px solid #1C6EA4;    // 全框(外框+內框)
      }
</style>