# 表格 輕松創建具有不同風格的漂亮的表格。 ## 用法 要應用這個組件，添加 `.uk-table` 類到一個 table 元素。表格的各行將被線條分隔開。 ### 示例  ### Code ``` <table class="uk-table"> <caption>...</caption> <thead> <tr> <th>...</th> </tr> </thead> <tfoot> <tr> <td>...</td> </tr> </tfoot> <tbody> <tr> <td>...</td> </tr> </tbody> </table> ``` * * * ### 列 要修改列的寬度或內容，你可以使用其他組件。下面是一些實用的例子：  #### Code ``` <td class="uk-width-1-10 uk-text-right">...</td> <td class="uk-width-9-10 uk-text-bold">...</td> ``` * * * ### 垂直修飾 垂直居中表格內容，只需添加 `.uk-table-middle` 類到 `&lt;tr&gt;` 或 `&lt;td&gt;` 元素。 * * * ## 修飾 若要以不同的風格樣式顯示表格，只需添加一個修飾類到 `.uk-table` 類之后。 ### 表格上的鼠標經過 添加 `.uk-table-hover` 類，賦予表格行鼠標經過狀態。 #### 示例  #### Code ``` <table class="uk-table uk-table-hover">...</table> ``` * * * ### 表格條紋 添加 `.uk-table-striped` 類，為表格應用斑馬線條紋狀態。 #### 示例  #### Code ``` <table class="uk-table uk-table-striped">...</table> ``` * * * ### 壓縮表格 添加 `.uk-table-condensed` 類使表格單元格更加緊湊。 #### 示例  #### Code ``` <table class="uk-table uk-table-condensed">...</table> ``` * * * ### 組合修飾類 表格組件的修飾類可以相互組合使用。 #### 示例  #### Code ``` <table class="uk-table uk-table-hover uk-table-striped uk-table-condensed">...</table> ``` * * * ## 響應式表格 如果你的表格恰好比它的容器元素寬了一些或者最終在某個特定的視口寬度中顯得太大，只需要用帶有 `.uk-overflow-container` 類的 `&lt;div&gt;` 元素將其包裹。當內部的元素比這個容器本身寬的時候，將會創建一個水平的滾動條。 ### 示例  #### Code ``` <div class="uk-overflow-container"> <table>...</table> </div> ```