Skip to content

Instantly share code, notes, and snippets.

@KMR-zoar

KMR-zoar/index.html

Last active May 2, 2018 07:57
Show Gist options
  • Save KMR-zoar/089c9eef76c7f172dcb53639d41fda58 to your computer and use it in GitHub Desktop.
Save KMR-zoar/089c9eef76c7f172dcb53639d41fda58 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TimeTable</title>
<link rel="stylesheet" href="tablestyle.css">
</head>
<body>
<table class="schedule">
<thead class="tableheader">
<tr>
<th>タイムテーブル</th>
<td class="splited">メインホール</td>
<td class="splited">スタジオプラス</td>
<td class="splited">セミナーA</td>
</tr>
</thead>
<tbody>
<tr>
<th>10:00</th>
<td class="joined" colspan="3">開場</td>
</tr>
<tr>
<th>10:30-11:15</th>
<td class="splited">
<div class="slot-cell">
<div class="slot-room">メインホール</div>
<div class="session">
基調講演<br>会場諸注意
</div>
</div>
</td>
<td class="splited scope-out"></td>
<td class="splited scope-out"></td>
</tr>
<tr>
<th>11:15-11:30</th>
<td class="joined" colspan="3">Short break</td>
</tr>
<tr>
<th>11:30-12:30</th>
<td class="splited">
<div class="slot-cell">
<div class="slot-room">メインホール</div>
<div class="session">
<p class="session-speaker">Speaker1</p>
<p class="session-title">Title1</p>
</div>
<div class="session">
<p class="session-speaker">Speaker2</p>
<p class="session-title">Title2</p>
</div>
<div class="session">
<p class="session-speaker">Speaker3</p>
<p class="session-title">Title3</p>
</div>
</div>
</td>
<td class="splited">
<div class="slot-cell">
<div class="slot-room">スタジオプラス</div>
<div class="session">
<p class="session-speaker">Speaker1</p>
<p class="session-title">Title1</p>
</div>
<div class="session">
<p class="session-speaker">Speaker2</p>
<p class="session-title">Title2</p>
</div>
<div class="session">
<p class="session-speaker">Speaker3</p>
<p class="session-title">Title3</p>
</div>
</div>
</td>
<td class="splited">
<div class="slot-cell">
<div class="slot-room">セミナーA</div>
<div class="session">
<p class="session-speaker">Speaker1</p>
<p class="session-title">Title1</p>
</div>
<div class="session">
<p class="session-speaker">Speaker2</p>
<p class="session-title">Title2</p>
</div>
<div class="session">
<p class="session-speaker">Speaker3</p>
<p class="session-title">Title3</p>
</div>
</div>
</td>
</tr>
<tr>
<th>12:30-13:30</th>
<td class="joined" colspan="3">Lunch</td>
</tr>
<tr>
<th>13:30-14:30</th>
<td class="splited">
<div class="slot-cell">
<div class="slot-room">メインホール</div>
<div class="session">
<p class="session-speaker">Speaker1</p>
<p class="session-title">Title1</p>
</div>
<div class="session">
<p class="session-speaker">Speaker2</p>
<p class="session-title">Title2</p>
</div>
<div class="session">
<p class="session-speaker">Speaker3</p>
<p class="session-title">Title3</p>
</div>
</div>
</td>
<td class="splited">
<div class="slot-cell">
<div class="slot-room">スタジオプラス</div>
<div class="session">
<p class="session-speaker">Speaker1</p>
<p class="session-title">Title1</p>
</div>
<div class="session">
<p class="session-speaker">Speaker2</p>
<p class="session-title">Title2</p>
</div>
<div class="session">
<p class="session-speaker">Speaker3</p>
<p class="session-title">Title3</p>
</div>
</div>
</td>
<td class="splited">
<div class="slot-cell">
<div class="slot-room">セミナーA</div>
<div class="session">
<p class="session-speaker">Speaker1</p>
<p class="session-title">Title1</p>
</div>
<div class="session">
<p class="session-speaker">Speaker2</p>
<p class="session-title">Title2</p>
</div>
<div class="session">
<p class="session-speaker">Speaker3</p>
<p class="session-title">Title3</p>
</div>
</div>
</td>
</tr>
<tr>
<th>14:30-15:00</th>
<td class="joined" colspan="3">Break</td>
</tr>
<tr>
<th>15:00-16:00</th>
<td class="splited">
<div class="slot-cell">
<div class="slot-room">メインホール</div>
<div class="session">
<p class="session-speaker">Speaker1</p>
<p class="session-title">Title1</p>
</div>
<div class="session">
<p class="session-speaker">Speaker2</p>
<p class="session-title">Title2</p>
</div>
<div class="session">
<p class="session-speaker">Speaker3</p>
<p class="session-title">Title3</p>
</div>
</div>
</td>
<td class="splited">
<div class="slot-cell">
<div class="slot-room">スタジオプラス</div>
<div class="session">
<p class="session-speaker">Speaker1</p>
<p class="session-title">Title1</p>
</div>
<div class="session">
<p class="session-speaker">Speaker2</p>
<p class="session-title">Title2</p>
</div>
<div class="session">
<p class="session-speaker">Speaker3</p>
<p class="session-title">Title3</p>
</div>
</div>
</td>
<td class="splited">
<div class="slot-cell">
<div class="slot-room">セミナーA</div>
<div class="session">
<p class="session-speaker">Speaker1</p>
<p class="session-title">Title1</p>
</div>
<div class="session">
<p class="session-speaker">Speaker2</p>
<p class="session-title">Title2</p>
</div>
<div class="session">
<p class="session-speaker">Speaker3</p>
<p class="session-title">Title3</p>
</div>
</div>
</td>
</tr>
<tr>
<th>16:00-16:15</th>
<td class="joined" colspan="3">Short break</td>
</tr>
<tr>
<th>16:15-16:40</th>
<td class="splited">
<div class="slot-cell">
<div class="slot-room">メインホール</div>
<div class="session">
Plenary
</div>
</div>
</td>
<td class="splited scope-out"></td>
<td class="splited scope-out"></td>
</tr>
<tr>
<th>17:30</th>
<td class="joined" colspan="3">懇親会 カフェテラス 日比谷グリーンサロン</td>
</tr>
</tbody>
</table>
</body>
</html>
Raw
tablestyle.css
.schedule {
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
border-collapse: collapse;
border-spacing: 0px; }
thead td {
background-color: #0000ca;
color: #ffffff;
font-weight: 700; }
th {
background-color: #ddddff;
font-weight: normal;
padding: 10px;
border: 1px solid #c0c0c0;
width: 10%; }
td {
padding: 10px;
border: 1px solid #c0c0c0;
width: 30%; }
.scope-out {
background-color: lightgrey; }
.slot-cell {
text-align: left; }
.slot-cell p {
margin: 0px 2px; }
.session {
margin: 5px 0px; }
.session-speaker {
display: inline-block; }
.session-speaker::after {
content: '/'; }
.session-title {
display: inline-block; }
.slot-room {
display: none; }
@media (max-width: 768px) {
table {
width: 100%; }
thead td {
display: none; }
th, td {
width: 100%;
padding-left: 0px;
padding-right: 0px;
display: block;
border-top: none; }
tr:first-child th {
border-top: 1px solid #c0c0c0; }
.scope-out {
display: none; }
.slot-room {
display: block;
color: #0000ca;
font-weight: 700; } }
Raw
tablestyle.scss
$THEAD_COLOR: #0000ca;
$TIMELINE_COLOR: #ddddff;
$TABLE_BORDER_COLOR: #c0c0c0;
$HEADER_FONT_COLOR: #ffffff;
.schedule {
width: 80%;
text-align: center;
margin-left: auto;
margin-right: auto;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
border-collapse: collapse;
border-spacing: 0px;
}
thead td {
background-color: $THEAD_COLOR;
color: $HEADER_FONT_COLOR;
font-weight: 700;
}
th {
background-color: $TIMELINE_COLOR;
font-weight: normal;
padding: 10px;
border: 1px solid $TABLE_BORDER_COLOR;
width: 10%;
}
td {
padding: 10px;
border: 1px solid $TABLE_BORDER_COLOR;
width: 30%;
}
.scope-out {
background-color: lightgrey;
}
.slot-cell {
text-align: left;
}
.slot-cell p {
margin: 0px 2px;
}
.session {
margin: 5px 0px;
}
.session-speaker {
display: inline-block;
}
.session-speaker::after {
content: '/';
}
.session-title {
display: inline-block;
}
.slot-room {
display: none;
}
@media (max-width: 768px) {
table {
width: 100%;
}
thead td {
display: none;
}
th, td {
width: 100%;
padding-left: 0px;
padding-right: 0px;
display: block;
border-top: none;
}
tr:first-child th {
border-top: 1px solid $TABLE_BORDER_COLOR;
}
.scope-out {
display: none;
}
.slot-room {
display: block;
color: $THEAD_COLOR;
font-weight: 700;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment