Foundation for Sites6.8.1 變更紀錄
元件清單

表格

好吧，它們不是最性感的東西，但表格可以完成工作（當然，對於表格資料而言）。它們具有回應式修改器，可根據表格需求幫助解決一些版面問題。

基礎

這裡沒有花俏的東西，只有一個直式的表格，以滿足您所有基本的表格需求。

在影片中觀看此部分

edit on codepen button 
<table>
  <thead>
    <tr>
      <th width="200">Table Header</th>
      <th>Table Header</th>
      <th width="150">Table Header</th>
      <th width="150">Table Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td>Content Goes Here</td>
    </tr>
  </tbody>
</table>
表格標題 表格標題 表格標題 表格標題
內容在此 這是較長的內容 Donec id elit non mi porta gravida at eget metus。 內容在此 內容在此
內容在此 這是較長的內容在此 Donec id elit non mi porta gravida at eget metus。 內容在此 內容在此
內容在此 這是較長的內容在此 Donec id elit non mi porta gravida at eget metus。 內容在此 內容在此

懸停狀態

需要稍微美化一下表格嗎？只要加入 .hover 類別，即可在懸停時稍微加深表格列的顏色。

在影片中觀看此部分

edit on codepen button 
<table class="hover">
</table>
表格標題 表格標題 表格標題 表格標題
內容在此 這是較長的內容 Donec id elit non mi porta gravida at eget metus。 內容在此 內容在此
內容在此 這是較長的內容在此 Donec id elit non mi porta gravida at eget metus。 內容在此 內容在此
內容在此 這是較長的內容在此 Donec id elit non mi porta gravida at eget metus。 內容在此 內容在此

條紋

預設情況下，表格列會以條紋顯示。有一個 .unstriped 類別可移除條紋。如果您將 $table-is-striped 變更為 false 以從所有表格中移除條紋，請使用 .striped 類別來新增條紋。

在影片中觀看此部分

edit on codepen button 
<table class="unstriped">
</table>
表格標題 表格標題 表格標題 表格標題
內容在此 這是較長的內容 Donec id elit non mi porta gravida at eget metus。 內容在此 內容在此
內容在此 這是較長的內容在此 Donec id elit non mi porta gravida at eget metus。 內容在此 內容在此
內容在此 這是較長的內容在此 Donec id elit non mi porta gravida at eget metus。 內容在此 內容在此

堆疊表格

若要在小螢幕上堆疊表格，請新增類別 .stack。

在影片中觀看此部分

edit on codepen button 
<table class="stack">
</table>
Cookie 味道 卡路里 整體
巧克力碎片 美味 120 卡 7.5/10
肉桂糖餅乾 美味 95 卡 8/10
燕麥葡萄乾 極佳 10 卡 11/10

可捲動表格

有許多管狀表格資料嗎？在表格周圍新增一個包含類別 .table-scroll 的包裝元素，以啟用水平捲動。

在影片中觀看此部分

包裝元素已新增至 Foundation 6.2，在此之前，您只需將類別 .scroll 新增至表格本身即可。但是，此方法不適用於 Internet Explorer 9。如果您不需要支援 IE9，您可以將 .scroll 新增至您的表格，且不需要包裝元素。

edit on codepen button 
<div class="table-scroll">
  <table></table>
</div>
這是說明！ 一 二 三 四 五 六 七 八 九 十 十一 十二
這些都是人們用來描述 Foundation 6 的字詞！ 酷 帥 輕鬆 殺手 超讚 球員 天啊 甜美 太棒了 野獸 迷幻 管狀
這些是人們用來描述其他網頁架構的字詞。 隨便 噁心。 哈哈 好 好吧 嗯。 生氣... 還好。 待會兒見 噁心。 真的嗎？ 為什麼？
以下是幾位很棒的超級英雄。 蝙蝠俠 超人 蜘蛛人 神奇女俠 浩克 尼可拉斯凱吉 蟻人 水行俠 美國隊長 金鋼狼 索爾 鋼鐵人
萬一需要，這裡有一個頁尾

Sass 參照

變數

此元件的預設樣式可以使用專案的 設定檔 中的這些 Sass 變數進行自訂。

名稱類型預設值說明
$table-background 顏色 $white

表格背景的預設顏色。
$table-color-scale 數字 5%

用於加深條紋表格列和表格邊框的預設比例。
$table-border 清單 1px solid smart-scale($table-background, $table-color-scale)

表格邊框的預設樣式。
$table-padding 數字 rem-calc(8 10 10)

表格的預設內距。
$table-hover-scale 數字 2%

用於加深表格列滑鼠移入時的預設比例。
$table-row-hover 清單 darken($table-background, $table-hover-scale)

滑鼠移入時標準列的預設顏色。
$table-row-stripe-hover 清單 darken($table-background, $table-color-scale + $table-hover-scale)

滑鼠移入時條紋列的預設顏色。
$table-is-striped 布林值 true

如果為 true，表格預設為條紋，並建立 .unstriped 類別。如果為 false，則建立 .striped 類別。
$table-striped-background 顏色 smart-scale($table-background, $table-color-scale)

條紋列的預設背景顏色。
$table-stripe 關鍵字 even

用於顯示表格列條紋的預設值，不包括標題和頁尾。如果為 even，偶數列將有背景顏色。如果為 odd，奇數列將有背景顏色。如果為空或任何其他值，表格列將沒有條紋。
$table-head-background 顏色 smart-scale($table-background, $table-color-scale * 0.5)

標題背景的預設顏色。
$table-head-row-hover 清單 darken($table-head-background, $table-hover-scale)

滑鼠移入時標題列的預設顏色。
$table-foot-background 顏色 smart-scale($table-background, $table-color-scale)

頁尾背景的預設顏色。
$table-foot-row-hover 清單 darken($table-foot-background, $table-hover-scale)

滑鼠移入時頁尾列的預設顏色。
$table-head-font-color 顏色 $body-font-color

標題的預設字體顏色。
$table-foot-font-color 顏色 $body-font-color

頁尾的預設字體顏色。
$show-header-for-stacked 布林值 false

使用堆疊表格時顯示標題的預設值。
$table-stack-breakpoint 中斷點 medium

堆疊表格從行動裝置檢視切換到電腦檢視的中斷點。

混合

我們使用這些混合來建立此元件的最終 CSS 輸出。您可以自行使用混合，從我們的元件中建立自己的類別結構。

table

@include table($stripe, $nest);

新增表格的一般樣式。

參數類型預設值說明
$stripe 關鍵字 $table-stripe

使用關鍵字 even、odd 或 none 來加深表格的列。預設值為 even。
$nest 布林值 false

如果您只想將此套用至特定表格，則需要此項目。

table-scroll

@include table-scroll;

當內容水平溢位時，增加水平捲動表格的功能。

table-hover

@include table-hover;

將表格列在滑鼠游標移入時略微加深。

table-stack

@include table-stack($header);

增加堆疊表格的樣式。適用於小螢幕版面。

參數類型預設值說明
$header 布林值 $show-header-for-stacked

堆疊時顯示標題的第一個 th。