/
githubmirror
/
Semantic-UI
Обзор
Документация
Войти
/
githubmirror
/
Semantic-UI
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
2.1.2
examples/components/table.html
471 строка
11 KB
jlukic
Add body padding to examples
01 июн 2015, 21:30
01 июн 2015, 21:30
699aeed
Код
Авторство
О чём код?
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>Theming - Semantic</title> <!--- Site CSS --> <link rel="stylesheet" type="text/css" href="../../dist/components/reset.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/site.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css"> <!--- Component CSS --> <link rel="stylesheet" type="text/css" href="../../dist/components/icon.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/table.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/button.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/transition.css"> <link rel="stylesheet" type="text/css" href="../../dist/components/popup.css"> <!--- Component JS --> <script src="../assets/library/jquery.min.js"></script> <script src="../assets/library/iframe-content.js"></script> <script type="text/javascript" src="../../dist/components/popup.js"></script> <script type="text/javascript" src="../../dist/components/transition.js"></script> <!--- Show Names --> <script src="../assets/show-examples.js"></script> <!--- Example CSS --> <style> body { padding: 1em; } .ui.table { table-layout: fixed; } </style> <!--- Example Javascript --> <script> </script> </head> <body> <div class="ui two column relaxed grid"> <div class="column"> <table class="ui right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Delmar</td> <td>36</td> <td>36g</td> <td>2g</td> </tr> <tr> <td class="left aligned">Louise</td> <td>24</td> <td>24g</td> <td>29g</td> </tr> <tr> <td class="left aligned">Terrell</td> <td>22</td> <td>11g</td> <td>9g</td> </tr> <tr> <td class="left aligned">Marion</td> <td>7</td> <td>35g</td> <td>3g</td> </tr> <tr> <td class="left aligned">Clayton</td> <td>7</td> <td>38g</td> <td>20g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui right aligned celled table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Drema</td> <td class="positive">15</td> <td class="negative">26g</td> <td class="warning">8g</td> </tr> <tr class="positive"> <td class="left aligned">Nona</td> <td>11</td> <td>21g</td> <td>16g</td> </tr> <tr class="negative"> <td class="left aligned">Isidra</td> <td>34</td> <td>43g</td> <td>11g</td> </tr> <tr class="warning"> <td class="left aligned">Bart</td> <td>41</td> <td>40g</td> <td>30g</td> </tr> <tr class="selected"> <td class="left aligned">Nguyet</td> <td>41</td> <td>44g</td> <td>28g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui basic right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Mirna</td> <td>1</td> <td>28g</td> <td>29g</td> </tr> <tr> <td class="left aligned">Fernando</td> <td>38</td> <td>2g</td> <td>48g</td> </tr> <tr> <td class="left aligned">Lisette</td> <td>18</td> <td>9g</td> <td>23g</td> </tr> <tr> <td class="left aligned">Ahmad</td> <td>42</td> <td>26g</td> <td>49g</td> </tr> <tr> <td class="left aligned">Laquanda</td> <td>27</td> <td>27g</td> <td>49g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui very basic right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Drema</td> <td>15</td> <td>26g</td> <td>8g</td> </tr> <tr> <td class="left aligned">Nona</td> <td>11</td> <td>21g</td> <td>16g</td> </tr> <tr> <td class="left aligned">Isidra</td> <td>34</td> <td>43g</td> <td>11g</td> </tr> <tr> <td class="left aligned">Bart</td> <td>41</td> <td>40g</td> <td>30g</td> </tr> <tr> <td class="left aligned">Nguyet</td> <td>41</td> <td>44g</td> <td>28g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui celled selectable right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Tasia</td> <td>12</td> <td>7g</td> <td>21g</td> </tr> <tr> <td class="left aligned">Ronnie</td> <td>38</td> <td>37g</td> <td>38g</td> </tr> <tr> <td class="left aligned">Gabriel</td> <td>30</td> <td>46g</td> <td>46g</td> </tr> <tr> <td class="left aligned">Logan</td> <td>12</td> <td>21g</td> <td>39g</td> </tr> <tr> <td class="left aligned">Clare</td> <td>39</td> <td>41g</td> <td>2g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui striped right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Rosaline</td> <td>5</td> <td>35g</td> <td>6g</td> </tr> <tr> <td class="left aligned">Barrie</td> <td>27</td> <td>23g</td> <td>28g</td> </tr> <tr> <td class="left aligned">Trinidad</td> <td>14</td> <td>50g</td> <td>7g</td> </tr> <tr> <td class="left aligned">Jaqueline</td> <td>31</td> <td>30g</td> <td>50g</td> </tr> <tr> <td class="left aligned">Tamala</td> <td>18</td> <td>6g</td> <td>13g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui padded celled right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Lianne</td> <td>23</td> <td>32g</td> <td>43g</td> </tr> <tr> <td class="left aligned">Joette</td> <td>21</td> <td>13g</td> <td>31g</td> </tr> <tr> <td class="left aligned">Le</td> <td>28</td> <td>39g</td> <td>23g</td> </tr> <tr> <td class="left aligned">Sacha</td> <td>46</td> <td>43g</td> <td>13g</td> </tr> <tr> <td class="left aligned">Bruna</td> <td>9</td> <td>47g</td> <td>12g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui definition celled right aligned table"> <thead> <th></th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Lianne</td> <td>23</td> <td>32g</td> <td>43g</td> </tr> <tr> <td class="left aligned">Joette</td> <td>21</td> <td>13g</td> <td>31g</td> </tr> <tr> <td class="left aligned">Le</td> <td>28</td> <td>39g</td> <td>23g</td> </tr> <tr> <td class="left aligned">Sacha</td> <td>46</td> <td>43g</td> <td>13g</td> </tr> <tr> <td class="left aligned">Bruna</td> <td>9</td> <td>47g</td> <td>12g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui inverted right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Lianne</td> <td>23</td> <td>32g</td> <td>43g</td> </tr> <tr> <td class="left aligned">Joette</td> <td>21</td> <td>13g</td> <td>31g</td> </tr> <tr> <td class="left aligned">Le</td> <td>28</td> <td>39g</td> <td>23g</td> </tr> <tr> <td class="left aligned">Sacha</td> <td>46</td> <td>43g</td> <td>13g</td> </tr> <tr> <td class="left aligned">Bruna</td> <td>9</td> <td>47g</td> <td>12g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui inverted blue selectable celled right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Lianne</td> <td>23</td> <td>32g</td> <td>43g</td> </tr> <tr> <td class="left aligned">Joette</td> <td>21</td> <td>13g</td> <td>31g</td> </tr> <tr> <td class="left aligned">Le</td> <td>28</td> <td>39g</td> <td>23g</td> </tr> <tr> <td class="left aligned">Sacha</td> <td>46</td> <td>43g</td> <td>13g</td> </tr> <tr> <td class="left aligned">Bruna</td> <td>9</td> <td>47g</td> <td>12g</td> </tr> </tbody> </table> </div> </body> </html>