Foundation框架支持通過基礎(chǔ)類和自定義CSS調(diào)整表格樣式。1. 使用.table、.striped、.hover等類設(shè)置默認(rèn)樣式；2. 通過具體選擇器覆蓋字體、邊框、背景色等；3. 利用媒體查詢和data-label屬性控制響應(yīng)式堆疊；4. 推薦使用SCSS變量修改$table-bg、$table-border-color等以深度定制，保持代碼整潔。

Foundation 是一個(gè)強(qiáng)大的前端框架，內(nèi)置了對(duì)表格（table）的基礎(chǔ)樣式支持。雖然它提供了默認(rèn)的美觀樣式，但在實(shí)際項(xiàng)目中，我們經(jīng)常需要對(duì)表格進(jìn)行自定義以滿足設(shè)計(jì)需求。下面介紹如何在 Foundation 框架中自定義表格樣式。

理解 Foundation 表格基礎(chǔ)類

Foundation 使用語義化的類名來控制表格外觀。常用類包括：

• .table：基礎(chǔ)表格樣式，添加邊框、間距和響應(yīng)式支持
• .hover：鼠標(biāo)懸停時(shí)高亮行
• .striped：斑馬條紋行
• .stack：在小屏幕上堆疊顯示（響應(yīng)式）
• .expand：表格寬度占滿父容器

例如：

<table class="table striped hover stack">
  <thead>
    <tr><th>姓名</th><th>年齡</th></tr>
  </thead>
  <tbody>
    <tr><td>張三</td><td>25</td></tr>
  </tbody>
</table>

覆蓋默認(rèn)樣式

Foundation 的默認(rèn)表格樣式可能不符合你的設(shè)計(jì)風(fēng)格。你可以通過自定義 CSS 覆蓋其規(guī)則。建議使用更具體的選擇器避免被覆蓋。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

示例：修改字體、邊框和背景色

.table {
  font-size: 14px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
}

.table th,
.table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.table th {
  background-color: #f5f5f5;
  font-weight: 600;
}

.table tbody tr:hover {
  background-color: #f9f9f9;
}

自定義響應(yīng)式行為

Foundation 的 .stack 類會(huì)在小屏幕將表格轉(zhuǎn)為堆疊布局。如果你希望更精細(xì)控制，可以結(jié)合媒體查詢自定義。

飛書多維表格

表格形態(tài)的AI工作流搭建工具，支持批量化的AI創(chuàng)作與分析任務(wù)，接入DeepSeek R1滿血版

26

查看詳情

比如，只在移動(dòng)端啟用堆疊，或調(diào)整堆疊后的標(biāo)簽樣式：

@media (max-width: 768px) {
  .table.stack thead {
    display: none;
  }
  .table.stack tbody tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    padding: 10px;
  }
  .table.stack td {
    display: block;
    text-align: right;
    padding: 5px 0;
  }
  .table.stack td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

此時(shí) HTML 需配合添加 data-label 屬性：

<td data-label="姓名">張三</td>

與 SCSS 深度集成（推薦方式）

如果你使用 Foundation 的 SCSS 版本，可以直接修改變量或擴(kuò)展組件。

在 SCSS 文件中調(diào)整表格變量：

$table-bg: #fff;
$table-border-color: #e0e0e0;
$table-striped-bg: #fafafa;
$table-hover-bg: #f5f5f5;
$table-cell-padding: 12px;

然后重新編譯 CSS，這樣能保持代碼整潔并避免樣式?jīng)_突。

基本上就這些。通過組合原生類、自定義 CSS 和 SCSS 變量，你可以靈活地控制 Foundation 表格的外觀，既保留框架優(yōu)勢(shì)，又滿足個(gè)性化需求。

以上就是css框架Foundation表格樣式自定義的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！