| Class | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday |
|---|---|---|---|---|---|---|---|
| Member of society | 9:00-10:00 | 10:00-12:00 | 14:00-16:00 | 17:00-19:00 | 19:00-21:00 | ||
| High schooler | 10:00-12:00 | 14:00-16:00 | 17:00-19:00 | 19:00-21:00 | |||
| Middle school students | 10:00-12:00 | 14:00-16:00 | 17:00-19:00 | 19:00-21:00 | |||
| Primary school children | 10:00-12:00 | 14:00-16:00 | 17:00-19:00 | 19:00-21:00 | |||
| Senior | 10:00-12:00 | 14:00-16:00 | 17:00-19:00 | 19:00-21:00 | |||
| Kids-A | 10:00-12:00 | 14:00-16:00 | 17:00-19:00 | 19:00-21:00 | |||
| Kids-B | 10:00-12:00 | 14:00-16:00 | 17:00-19:00 | 19:00-21:00 |
2013/09/20
レスポンシブ table
見出しを固定し（左記）、右記部分をスクロールさせる方法
css
------------------------------
@media only screen and (max-width: 800px) {
table{
display: block;
position: relative;
width: 95%;
}
table thead{
display: block;
float: left;
}
table tbody{
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap;
}
table thead tr{
display: block;
}
table th{
display: block;
}
table tbody tr{
display: inline-block;
vertical-align: top;
}
table td{
display: block;
min-height: 1.25em;
}
/* borderの調整 */
th{
border-bottom: 0;
}
td{
border-left: 0;
border-right: 0;
border-bottom: 0;
}
tbody tr{
border-right: 1px solid #babcbf;
}
th:last-child,
td:last-child {
// border-bottom: 1px solid #babcbf;
}
}
HTML
------------------------------------
クリアフィックスを利用するのがキモ。
登録:
投稿 (Atom)