CSS+DIV畫表格

8月 23, 2017

轉自: (https://sofree.cc/css-table/)

開始進行CSS+DIV畫表格

為了讓大家方便在DIV和table之間的轉換，所以在CSS的命名上主要就是使用「css_」作為開頭，方便做一個對照。首先，以前面的範例table範例語法：

<table>
    <tr>
        <td>標題</td>
        <td>回應</td>
        <td>日期</td>
    <tr>
    <tr>
        <td>如何停用WordPress內建搜尋功能？</td>
        <td>5</td>
        <td>2011-10-30</td>
    <tr>
</table>

接著，我們將以上語法改成CSS+DIV的切板模式，如同前面所說，為了方便對照，所以CSS的定名開頭採用「css_」。

<div id="css_table">
      <div class="css_tr">
          <div class="css_td">標題</div>
          <div class="css_td">回應</div>
          <div class="css_td">日期</div>
      </div>
      <div class="css_tr">
          <div class="css_td">如何停用WordPress內建搜尋功能？</div>
          <div class="css_td">5</div>
          <div class="css_td">2011-10-30</div>
      </div>
</div>

接下來，我們套上CSS的語法，效果就會出現了！

#css_table {
      display:table;
  }
.css_tr {
      display: table-row;
  }
.css_td {
      display: table-cell;
  }

CSS語法與table比對

事實上，從上面的語法來看，要用table改成css的方式並不困難，所有的樣式定義需要全部透過CSS的id或是class全部獨立出來，其他部分寫起來是差不多的。上面的語法，並沒有對CSS畫出的表個做顏色、邊線、寬度作定義，可能看起來醜醜的，這部分就請大家自己摸索了。這篇文章主要是要告訴大家，利用CSS也是可以達到table的效果。下面列出一些display對應table的屬性：

inline-table：顯示成前後沒有換行的表格
table：對應<table>標籤，以表格方式顯示。
table-row：對應<tr>標籤。
table-row-group：對應<tbody>標籤。
table-cell：對應<td>標籤。
table-caption：對應<caption>標籤。
table-column：對應<col>標籤
table-column-group：對應<colgroup>標籤。
table-header-group：對應<theader>標籤。
table-footer-group：對應<tfooter>標籤。

IE7以下不相容

沒錯，這樣的CSS屬性很巧的，只有在IE8以上才有支援，如果是IE7以下的瀏覽器，必須做CSS的相容性校正了，這是小可惜的地方。但目前瀏覽器的使用量，IE7的比例也逐漸下降，因為大多XP使用者如果要升級瀏覽器，都會直接升級IE8。如果要校正，那就要善用幾個屬性：display:block、float:left，還有padding和margin進行校正了。

搜尋此網誌

流水上面的一塊葉