DIV TABLE格線範例

by wllai2001

HTML

<div class="table">
  <div class="table-row">
    <div class="table-cell">单元格1</div>
    <div class="table-cell">单元格2</div>
    <div class="table-cell">单元格3</div>
  </div>
  <div class="table-row">
    <div class="table-cell">单元格4</div>
    <div class="table-cell">单元格5</div>
    <div class="table-cell">单元格6</div>
  </div>
</div>

<style>
  [class $= 'cell'] {/*有無單引號都可以的樣子*/
    display: table-cell;
    border: 1px solid red;
  }
  div.table-row {
    display: table-row;
    border-top: 1px solid black;
  }
  div.table {
    display: table;
    border-collapse: collapse;
    border: 1px solid black;
  }
</style>



<div class="wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit ullamcorper augue eu luctus.</p>
    <p>Mauris id nulla aliquam, interdum velit non, lobortis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Donec facilisis leo in lectus sagittis, quis laoreet augue pellentesque. Donec fermentum ligula at leo ultrices, nec aliquam eros dapibus.</p>
  </div>
</div>
<style>
.wrapper {
  display: table;
  width: 100%;
}
.content {
  display: table-cell;
  vertical-align: top;
  line-height: 1.5;
}
p {
  margin: 0;
  padding: 0;
}
</style>