通过 🎓 在线互动课程、📺 教育视频和 🧑🏻‍💻 项目构建教程学习 CSS。
下载

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 助手

赞助

Route Planner and Route Optimizer

表格

不可避免的 HTML 表格，带有特殊情况的单元格

您可以通过在具有以下结构的 <table> HTML 元素上附加一个 table CSS 类来创建一个 Bulma 表格

  • <table class="table"> 作为主要的 容器
    • thead 表格的可选 顶部 部分
    • tfoot 表格的可选 底部 部分
    • tbody 表格的主要 内容
      • tr 每个表格 行
        • th 表格单元格 标题
        • td 表格 单元格

您可以通过在 <tr> 上附加 is-selected 修饰符来将表格行设置为 选中

示例

排名 球队 已赛 胜 平 负 进球 失球 净胜球 积分 资格或降级
排名 球队 已赛 胜 平 负 进球 失球 净胜球 积分 资格或降级
1 莱斯特城 (C) 38 23 12 3 68 36 +32 81 获得 冠军联赛小组赛 资格
2 阿森纳 38 20 11 7 65 36 +29 71 获得 冠军联赛小组赛 资格
3 托特纳姆热刺 38 19 13 6 69 35 +34 70 获得 冠军联赛小组赛 资格
4 曼城 38 19 9 10 71 41 +30 66 获得 冠军联赛附加赛 资格
5 曼联 38 19 9 10 49 35 +14 66 获得 欧罗巴联赛小组赛 资格
6 南安普顿 38 18 9 11 59 41 +18 63 获得 欧罗巴联赛小组赛 资格
7 西汉姆联 38 16 14 8 65 51 +14 62 获得 欧罗巴联赛第三轮资格赛 资格
8 利物浦 38 16 12 10 63 50 +13 60
9 斯托克城 38 14 9 15 41 55 −14 51
10 切尔西 38 12 14 12 59 53 +6 50
11 埃弗顿 38 11 14 13 59 55 +4 47
12 斯旺西城 38 12 11 15 42 52 −10 47
13 沃特福德 38 12 9 17 40 50 −10 45
14 西布朗 38 10 13 15 34 48 −14 43
15 水晶宫 38 11 9 18 39 51 −12 42
16 伯恩茅斯 38 11 9 18 45 67 −22 42
17 桑德兰 38 9 12 17 48 62 −14 39
18 纽卡斯尔联 (R) 38 9 10 19 44 65 −21 37 降级至 足球冠军联赛
19 诺维奇城 (R) 38 9 7 22 39 67 −28 34 降级至 足球冠军联赛
20 阿斯顿维拉 (R) 38 3 8 27 27 76 −49 17 降级至 足球冠军联赛

HTML 

<table class="table">
  <thead>
    <tr>
      <th><abbr title="Position">Pos</abbr></th>
      <th>Team</th>
      <th><abbr title="Played">Pld</abbr></th>
      <th><abbr title="Won">W</abbr></th>
      <th><abbr title="Drawn">D</abbr></th>
      <th><abbr title="Lost">L</abbr></th>
      <th><abbr title="Goals for">GF</abbr></th>
      <th><abbr title="Goals against">GA</abbr></th>
      <th><abbr title="Goal difference">GD</abbr></th>
      <th><abbr title="Points">Pts</abbr></th>
      <th>Qualification or relegation</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th><abbr title="Position">Pos</abbr></th>
      <th>Team</th>
      <th><abbr title="Played">Pld</abbr></th>
      <th><abbr title="Won">W</abbr></th>
      <th><abbr title="Drawn">D</abbr></th>
      <th><abbr title="Lost">L</abbr></th>
      <th><abbr title="Goals for">GF</abbr></th>
      <th><abbr title="Goals against">GA</abbr></th>
      <th><abbr title="Goal difference">GD</abbr></th>
      <th><abbr title="Points">Pts</abbr></th>
      <th>Qualification or relegation</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>1</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Leicester_City_F.C."
          title="Leicester City F.C."
          >Leicester City</a
        >
        <strong>(C)</strong>
      </td>
      <td>38</td>
      <td>23</td>
      <td>12</td>
      <td>3</td>
      <td>68</td>
      <td>36</td>
      <td>+32</td>
      <td>81</td>
      <td>
        Qualification for the
        <a
          href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
          title="2016–17 UEFA Champions League"
          >Champions League group stage</a
        >
      </td>
    </tr>
    <tr>
      <th>2</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Arsenal_F.C."
          title="Arsenal F.C."
          >Arsenal</a
        >
      </td>
      <td>38</td>
      <td>20</td>
      <td>11</td>
      <td>7</td>
      <td>65</td>
      <td>36</td>
      <td>+29</td>
      <td>71</td>
      <td>
        Qualification for the
        <a
          href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
          title="2016–17 UEFA Champions League"
          >Champions League group stage</a
        >
      </td>
    </tr>
    <tr>
      <th>3</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C."
          title="Tottenham Hotspur F.C."
          >Tottenham Hotspur</a
        >
      </td>
      <td>38</td>
      <td>19</td>
      <td>13</td>
      <td>6</td>
      <td>69</td>
      <td>35</td>
      <td>+34</td>
      <td>70</td>
      <td>
        Qualification for the
        <a
          href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
          title="2016–17 UEFA Champions League"
          >Champions League group stage</a
        >
      </td>
    </tr>
    <tr class="is-selected">
      <th>4</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Manchester_City_F.C."
          title="Manchester City F.C."
          >Manchester City</a
        >
      </td>
      <td>38</td>
      <td>19</td>
      <td>9</td>
      <td>10</td>
      <td>71</td>
      <td>41</td>
      <td>+30</td>
      <td>66</td>
      <td>
        Qualification for the
        <a
          href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round"
          title="2016–17 UEFA Champions League"
          >Champions League play-off round</a
        >
      </td>
    </tr>
    <tr>
      <th>5</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Manchester_United_F.C."
          title="Manchester United F.C."
          >Manchester United</a
        >
      </td>
      <td>38</td>
      <td>19</td>
      <td>9</td>
      <td>10</td>
      <td>49</td>
      <td>35</td>
      <td>+14</td>
      <td>66</td>
      <td>
        Qualification for the
        <a
          href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage"
          title="2016–17 UEFA Europa League"
          >Europa League group stage</a
        >
      </td>
    </tr>
    <tr>
      <th>6</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Southampton_F.C."
          title="Southampton F.C."
          >Southampton</a
        >
      </td>
      <td>38</td>
      <td>18</td>
      <td>9</td>
      <td>11</td>
      <td>59</td>
      <td>41</td>
      <td>+18</td>
      <td>63</td>
      <td>
        Qualification for the
        <a
          href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage"
          title="2016–17 UEFA Europa League"
          >Europa League group stage</a
        >
      </td>
    </tr>
    <tr>
      <th>7</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/West_Ham_United_F.C."
          title="West Ham United F.C."
          >West Ham United</a
        >
      </td>
      <td>38</td>
      <td>16</td>
      <td>14</td>
      <td>8</td>
      <td>65</td>
      <td>51</td>
      <td>+14</td>
      <td>62</td>
      <td>
        Qualification for the
        <a
          href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round"
          title="2016–17 UEFA Europa League"
          >Europa League third qualifying round</a
        >
      </td>
    </tr>
    <tr>
      <th>8</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Liverpool_F.C."
          title="Liverpool F.C."
          >Liverpool</a
        >
      </td>
      <td>38</td>
      <td>16</td>
      <td>12</td>
      <td>10</td>
      <td>63</td>
      <td>50</td>
      <td>+13</td>
      <td>60</td>
      <td></td>
    </tr>
    <tr>
      <th>9</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Stoke_City_F.C."
          title="Stoke City F.C."
          >Stoke City</a
        >
      </td>
      <td>38</td>
      <td>14</td>
      <td>9</td>
      <td>15</td>
      <td>41</td>
      <td>55</td>
      <td>−14</td>
      <td>51</td>
      <td></td>
    </tr>
    <tr>
      <th>10</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Chelsea_F.C."
          title="Chelsea F.C."
          >Chelsea</a
        >
      </td>
      <td>38</td>
      <td>12</td>
      <td>14</td>
      <td>12</td>
      <td>59</td>
      <td>53</td>
      <td>+6</td>
      <td>50</td>
      <td></td>
    </tr>
    <tr>
      <th>11</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Everton_F.C."
          title="Everton F.C."
          >Everton</a
        >
      </td>
      <td>38</td>
      <td>11</td>
      <td>14</td>
      <td>13</td>
      <td>59</td>
      <td>55</td>
      <td>+4</td>
      <td>47</td>
      <td></td>
    </tr>
    <tr>
      <th>12</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C."
          title="Swansea City A.F.C."
          >Swansea City</a
        >
      </td>
      <td>38</td>
      <td>12</td>
      <td>11</td>
      <td>15</td>
      <td>42</td>
      <td>52</td>
      <td>−10</td>
      <td>47</td>
      <td></td>
    </tr>
    <tr>
      <th>13</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Watford_F.C."
          title="Watford F.C."
          >Watford</a
        >
      </td>
      <td>38</td>
      <td>12</td>
      <td>9</td>
      <td>17</td>
      <td>40</td>
      <td>50</td>
      <td>−10</td>
      <td>45</td>
      <td></td>
    </tr>
    <tr>
      <th>14</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C."
          title="West Bromwich Albion F.C."
          >West Bromwich Albion</a
        >
      </td>
      <td>38</td>
      <td>10</td>
      <td>13</td>
      <td>15</td>
      <td>34</td>
      <td>48</td>
      <td>−14</td>
      <td>43</td>
      <td></td>
    </tr>
    <tr>
      <th>15</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C."
          title="Crystal Palace F.C."
          >Crystal Palace</a
        >
      </td>
      <td>38</td>
      <td>11</td>
      <td>9</td>
      <td>18</td>
      <td>39</td>
      <td>51</td>
      <td>−12</td>
      <td>42</td>
      <td></td>
    </tr>
    <tr>
      <th>16</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth"
          title="A.F.C. Bournemouth"
          >AFC Bournemouth</a
        >
      </td>
      <td>38</td>
      <td>11</td>
      <td>9</td>
      <td>18</td>
      <td>45</td>
      <td>67</td>
      <td>−22</td>
      <td>42</td>
      <td></td>
    </tr>
    <tr>
      <th>17</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Sunderland_A.F.C."
          title="Sunderland A.F.C."
          >Sunderland</a
        >
      </td>
      <td>38</td>
      <td>9</td>
      <td>12</td>
      <td>17</td>
      <td>48</td>
      <td>62</td>
      <td>−14</td>
      <td>39</td>
      <td></td>
    </tr>
    <tr>
      <th>18</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Newcastle_United_F.C."
          title="Newcastle United F.C."
          >Newcastle United</a
        >
        <strong>(R)</strong>
      </td>
      <td>38</td>
      <td>9</td>
      <td>10</td>
      <td>19</td>
      <td>44</td>
      <td>65</td>
      <td>−21</td>
      <td>37</td>
      <td>
        Relegation to the
        <a
          href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
          title="2016–17 Football League Championship"
          >Football League Championship</a
        >
      </td>
    </tr>
    <tr>
      <th>19</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Norwich_City_F.C."
          title="Norwich City F.C."
          >Norwich City</a
        >
        <strong>(R)</strong>
      </td>
      <td>38</td>
      <td>9</td>
      <td>7</td>
      <td>22</td>
      <td>39</td>
      <td>67</td>
      <td>−28</td>
      <td>34</td>
      <td>
        Relegation to the
        <a
          href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
          title="2016–17 Football League Championship"
          >Football League Championship</a
        >
      </td>
    </tr>
    <tr>
      <th>20</th>
      <td>
        <a
          href="https://en.wikipedia.org/wiki/Aston_Villa_F.C."
          title="Aston Villa F.C."
          >Aston Villa</a
        >
        <strong>(R)</strong>
      </td>
      <td>38</td>
      <td>3</td>
      <td>8</td>
      <td>27</td>
      <td>27</td>
      <td>76</td>
      <td>−49</td>
      <td>17</td>
      <td>
        Relegation to the
        <a
          href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
          title="2016–17 Football League Championship"
          >Football League Championship</a
        >
      </td>
    </tr>
  </tbody>
</table>

颜色 #

您可以通过添加以下颜色修饰符之一来更改单个 <td> 或 <th> 单元格或整个 <tr> 行的颜色

  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger
  • is-black
  • is-dark
  • is-light
  • is-white

示例

Link th 单元格 二 Link td 单元格 四 五
Link 行 二 三 四 五
Primary th 单元格 二 Primary td 单元格 四 五
Primary 行 二 三 四 五
Info th 单元格 二 Info td 单元格 四 五
Info 行 二 三 四 五
Success th 单元格 二 Success td 单元格 四 五
Success 行 二 三 四 五
Warning th 单元格 二 Warning td 单元格 四 五
Warning 行 二 三 四 五
Danger th 单元格 二 Danger td 单元格 四 五
Danger 行 二 三 四 五

HTML 

<table class="table is-bordered">
  <tbody>
    
      <tr>
        <th class="is-link">Link th cell</th>
        <td>Two</td>
        <td class="is-link">Link td cell</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
      <tr class="is-link">
        <th>Link row</th>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
    
      <tr>
        <th class="is-primary">Primary th cell</th>
        <td>Two</td>
        <td class="is-primary">Primary td cell</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
      <tr class="is-primary">
        <th>Primary row</th>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
    
      <tr>
        <th class="is-info">Info th cell</th>
        <td>Two</td>
        <td class="is-info">Info td cell</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
      <tr class="is-info">
        <th>Info row</th>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
    
      <tr>
        <th class="is-success">Success th cell</th>
        <td>Two</td>
        <td class="is-success">Success td cell</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
      <tr class="is-success">
        <th>Success row</th>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
    
      <tr>
        <th class="is-warning">Warning th cell</th>
        <td>Two</td>
        <td class="is-warning">Warning td cell</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
      <tr class="is-warning">
        <th>Warning row</th>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
    
      <tr>
        <th class="is-danger">Danger th cell</th>
        <td>Two</td>
        <td class="is-danger">Danger td cell</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
      <tr class="is-danger">
        <th>Danger row</th>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
    
  </tbody>
</table>

修饰符 #

为所有单元格添加 边框。

table is-bordered
一 二
三 四

为表格添加 条纹。

table is-striped
一 二
三 四
五 六
七 八
九 十
十一 十二

使单元格 更窄。

table is-narrow
一 二
三 四
五 六
七 八
九 十
十一 十二

您可以为每一行添加 悬停效果

table is-hoverable
一 二
三 四
五 六
七 八
九 十
十一 十二

您可以拥有一个 全宽 表格。

table is-fullwidth
一 二
三 四
五 六
七 八
九 十
十一 十二

您可以 组合 所有五个修饰符。

table is-bordered is-striped is-narrow is-hoverable is-fullwidth
一 二
三 四
五 六
七 八
九 十
十一 十二

表格容器 #

您可以通过将 table 包装在 table-container 元素中来创建一个 可滚动表格

<div class="table-container">
  <table class="table">
    <!-- Your table content -->
  </table>
</div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
2 4 6 8 10 12 14 16 18 20 22 24 26 28 30 32 34 36 38 40 42 44 46 48 50 52 54 56 58 60 62 64 66 68 70 72 74 76 78 80 82 84 86 88 90 92 94 96 98 100 102 104 106 108 110 112 114 116 118 120 122 124 126 128 130 132 134 136 138 140 142 144 146 148 150 152 154 156 158 160 162 164 166 168 170 172 174 176 178 180 182 184 186 188 190 192 194 196 198 200
3 6 9 12 15 18 21 24 27 30 33 36 39 42 45 48 51 54 57 60 63 66 69 72 75 78 81 84 87 90 93 96 99 102 105 108 111 114 117 120 123 126 129 132 135 138 141 144 147 150 153 156 159 162 165 168 171 174 177 180 183 186 189 192 195 198 201 204 207 210 213 216 219 222 225 228 231 234 237 240 243 246 249 252 255 258 261 264 267 270 273 276 279 282 285 288 291 294 297 300
4 8 12 16 20 24 28 32 36 40 44 48 52 56 60 64 68 72 76 80 84 88 92 96 100 104 108 112 116 120 124 128 132 136 140 144 148 152 156 160 164 168 172 176 180 184 188 192 196 200 204 208 212 216 220 224 228 232 236 240 244 248 252 256 260 264 268 272 276 280 284 288 292 296 300 304 308 312 316 320 324 328 332 336 340 344 348 352 356 360 364 368 372 376 380 384 388 392 396 400
5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100 105 110 115 120 125 130 135 140 145 150 155 160 165 170 175 180 185 190 195 200 205 210 215 220 225 230 235 240 245 250 255 260 265 270 275 280 285 290 295 300 305 310 315 320 325 330 335 340 345 350 355 360 365 370 375 380 385 390 395 400 405 410 415 420 425 430 435 440 445 450 455 460 465 470 475 480 485 490 495 500

Sass 和 CSS 变量 #

Sass 变量
CSS 变量
值
 
$table-color
 
var(--bulma-table-color)
 
var(--bulma-text-strong)
 
$table-background-color
 
var(--bulma-table-background-color)
 
var(--bulma-scheme-main)
 
$table-cell-border-color
 
var(--bulma-table-cell-border-color)
 
var(--bulma-border)
 
$table-cell-border-style
 
var(--bulma-table-cell-border-style)
 
solid
 
$table-cell-border-width
 
var(--bulma-table-cell-border-width)
 
0 0 1px
 
$table-cell-padding
 
var(--bulma-table-cell-padding)
 
0.5em 0.75em
 
$table-cell-heading-color
 
var(--bulma-table-cell-heading-color)
 
var(--bulma-text-strong)
 
$table-cell-text-align
 
var(--bulma-table-cell-text-align)
 
left
 
$table-head-cell-border-width
 
var(--bulma-table-head-cell-border-width)
 
0 0 2px
 
$table-head-cell-color
 
var(--bulma-table-head-cell-color)
 
var(--bulma-text-strong)
 
$table-foot-cell-border-width
 
var(--bulma-table-foot-cell-border-width)
 
2px 0 0
 
$table-foot-cell-color
 
var(--bulma-table-foot-cell-color)
 
var(--bulma-text-strong)
 
$table-head-background-color
 
var(--bulma-table-head-background-color)
 
transparent
 
$table-body-background-color
 
var(--bulma-table-body-background-color)
 
transparent
 
$table-foot-background-color
 
var(--bulma-table-foot-background-color)
 
transparent
 
$table-row-hover-background-color
 
var(--bulma-table-row-hover-background-color)
 
var(--bulma-scheme-main-bis)
 
$table-row-active-background-color
 
var(--bulma-table-row-active-background-color)
 
var(--bulma-primary)
 
$table-row-active-color
 
var(--bulma-table-row-active-color)
 
var(--bulma-primary-invert)
 
$table-striped-row-even-background-color
 
var(--bulma-table-striped-row-even-background-color)
 
var(--bulma-scheme-main-bis)
 
$table-striped-row-even-hover-background-color
 
var(--bulma-table-striped-row-even-hover-background-color)
 
var(--bulma-scheme-main-ter)

如何支持 Bulma

一次性 捐赠

通过进行 浏览器测试

访问我们的 赞助商

每月 捐赠

成为赞助商
#native_company# #native_desc#
#native_cta#
免费开始使用
免费开始使用