表格（Table）

轻松创建具有常见样式效果的表格

1

只需在HTML

元素上附加一个表CSS类<table>，即可创建一个Bulma表，其结构如下：

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

通过在表行<tr>上附加 is-selected修饰符，可以将表行设置为选定行。

Example

Pos Team Pld W D L GF GA GD Pts Qualification or relegation
Pos Team Pld W D L GF GA GD Pts Qualification or relegation
1 Leicester City (C) 38 23 12 3 68 36 +32 81 Qualification for the Champions League group stage
2 Arsenal 38 20 11 7 65 36 +29 71 Qualification for the Champions League group stage
3 Tottenham Hotspur 38 19 13 6 69 35 +34 70 Qualification for the Champions League group stage
4 Manchester City 38 19 9 10 71 41 +30 66 Qualification for the Champions League play-off round
5 Manchester United 38 19 9 10 49 35 +14 66 Qualification for the Europa League group stage
6 Southampton 38 18 9 11 59 41 +18 63 Qualification for the Europa League group stage
7 West Ham United 38 16 14 8 65 51 +14 62 Qualification for the Europa League third qualifying round
8 Liverpool 38 16 12 10 63 50 +13 60
9 Stoke City 38 14 9 15 41 55 −14 51
10 Chelsea 38 12 14 12 59 53 +6 50
11 Everton 38 11 14 13 59 55 +4 47
12 Swansea City 38 12 11 15 42 52 −10 47
13 Watford 38 12 9 17 40 50 −10 45
14 West Bromwich Albion 38 10 13 15 34 48 −14 43
15 Crystal Palace 38 11 9 18 39 51 −12 42
16 AFC Bournemouth 38 11 9 18 45 67 −22 42
17 Sunderland 38 9 12 17 48 62 −14 39
18 Newcastle United (R) 38 9 10 19 44 65 −21 37 Relegation to the Football League Championship
19 Norwich City (R) 38 9 7 22 39 67 −28 34 Relegation to the Football League Championship
20 Aston Villa (R) 38 3 8 27 27 76 −49 17 Relegation to the Football League Championship

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>

1.表格修饰符

给所有的单元格增加边框

table is-bordered
One Two
Three Four

给表格增加条纹

table is-striped
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve

较窄单元格

table is-narrow
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve

增加悬停效果

table is-hoverable
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve

全宽表格

table is-fullwidth
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve

你可以组合使用全部5个修饰符

table is-bordered is-striped is-narrow is-hoverable is-fullwidth
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve

2.表格容器

可以通过将表包装到表容器元素中来创建可滚动表： 

<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

3.变量

Name
Type
Value
Computed Value
Computed Type 
$table-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$table-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$table-cell-border
size
1px solid $border
$table-cell-border-width
size
0 0 1px
$table-cell-padding
size
0.5em 0.75em
$table-cell-heading-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$table-head-cell-border-width
size
0 0 2px
$table-head-cell-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$table-foot-cell-border-width
size
2px 0 0
$table-foot-cell-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$table-head-background-color
string
transparent
$table-body-background-color
string
transparent
$table-foot-background-color
string
transparent
$table-row-hover-background-color
variable
$scheme-main-bis
hsl(0, 0%, 98%)
color
$table-row-active-background-color
variable
$primary
hsl(171, 100%, 41%)
color
$table-row-active-color
variable
$primary-invert
#fff
color
$table-striped-row-even-background-color
variable
$scheme-main-bis
hsl(0, 0%, 98%)
color
$table-striped-row-even-hover-background-color
variable
$scheme-main-ter
hsl(0, 0%, 96%)
color
$table-colors
variable
$colors
Bulma colors
map

返回头部

23222

问题反馈
返回顶部