■ TEXT ALIGNMENT
text is automatically set to align left.
classes: align-left, align-right, align-center
can be applied to the entire row or to specific table cells only.
| this entire row | is centered | add class to the table row <tr class=”align-center”> |
|---|---|---|
| テキストダミー | only this cell is centered <td class=”align-center”> |
テキストダミー |
| this entire row | is centered | except for this cell <td class=”align-left”> |
■ SETTING COLUMN WIDTH
specify column width by setting the width on the column’s table header.
| プログラム | 期間 | 英語のレベル |
|---|---|---|
| 一般英語 | 1週間〜 | 初級～上級 |
| English for Communication／一般英語 | 5週間〜 | 初級～上級 |
| University College Pathway／パスウェイ | 10週間単位 | 初級～上級 |
■ SET TABLE WIDTH
table is automatically set to fill the entire container (100%).
set table width by adding style to table tag
<table style=”width: ??;”>
| タイトルダミー | タイトルダミー | タイトルダミー | タイトルダミー | タイトルダミー |
|---|---|---|---|---|
| テキストダミー | テキストダミー | テキストダミー | テキストダミー | テキストダミー |
| タイトルダミー | タイトルダミー | タイトルダミー |
|---|---|---|
| テキストダミー | テキストダミー | テキストダミー |
■ MOBILE/SMARTPHONE WIDTH
mobile/smartphone(sp) width cannot be set through inline style.
table width for sp is automatically set to minimum width of 600px.
custom classes can be used to set the table width for mobile:
sp-full, sp-1000, sp-1200, sp-1500
you may add more sp classes to style-table.css
no sp width explicitly set– 600px width| タイトルダミー | タイトルダミー | タイトルダミー |
|---|---|---|
| テキストダミー | テキストダミー | テキストダミー |
sp-full – 100% width
| タイトルダミー | タイトルダミー | タイトルダミー |
|---|---|---|
| テキストダミー | テキストダミー | テキストダミー |
sp-1000– 1000px width
| タイトルダミー | タイトルダミー | タイトルダミー |
|---|---|---|
| テキストダミー | テキストダミー | テキストダミー |
■ EQUAL WIDTH COLUMNS
columns are automatically set have equal width. to remove this, just add this class:
<table class=”unset-fixed”>
fixed – equal width all columns
| 1ヶ月 | 3ヶ月 | 6ヶ月 | 9ヶ月 |
|---|---|---|---|
| 約30～40万円 | 約78～90万円 | 約138～156万円 | 約204～228万円 |
not fixed – 3rd and 4th columns are wider
| 1ヶ月 | 3ヶ月 | 6ヶ月 | 9ヶ月 |
|---|---|---|---|
| 約30～40万円 | 約78～90万円 | 約138～156万円 | 約204～228万円 |
■ DIFFERENT COLUMN WIDTHS FOR DESKTOP AND MOBILE
you can set different column width for desktop and mobile view by creating two of the same columnand adding class pc & sp respectively to the table header (th)
| this column’s width is 50% for desktop | this column’s width is 40% for mobile | タイトルダミー | タイトルダミー |
|---|---|---|---|
| テキストダミー | テキストダミー | テキストダミー |
■ TABLE STYLE 2
add class to table&lgt;table class=”table table–horizontal”>
| タイトルダミー | テキストダミー |
|---|---|
| タイトルダミー | テキストダミー |
| タイトルダミー | テキストダミー |
