m-programme.html

<style>
@import url('https://fonts.googleapis.com/css?family=Zilla+Slab');
table {width: 100%;}
table, th, td {
  border-collapse: collapse;
  border: 1px solid white;
  padding: .5em;
  font-size: 14px;
  color: white;
}

th, .break {background-color: gray;}

td {text-align: center;}
td[colspan="3"] {font-size: 16px;}

.desc {font-size: larger; font-weight: bolder; margin-bottom: .5em;}
.desc.keynote::before{
  content: "Keynote";
  font-size: small;
  padding: 4px;
  background: black;
  margin-right: 1em;
  font-family: "Zilla Slab", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
}

.speaker {
  padding: 0;
  margin: 0 auto;
  list-style: none;
  font-size: small;
  max-width: 40em;
}

.speaker.column { column-count: 2;}

.title:before{content: "(";}
.title:after{content: ")";}

td .time {text-align: left;}
td .time span {
  background-color: black;
  color:yellow;
  padding: .3em;
}

@media (max-width: 667px){
  table, th, td {
    font-size: 10px;
    text-align: left;
    vertical-align: top;
  }
  .title{
    display: block;
    font-size: xx-small;
  }
  .title:before, .title:after {
    content:"";
  }
  
  th:first-child{
    width: 2em;
    text-align: center;
  }
  th p span{
    display: block;
    background-color: black;
  }
  .desc.keynote::before{
    display:block;
    text-align: center;
    width: 4.2em;
    padding:0;
  }
}
</style>

<table>
  <tr>
    <th>時間</th>
    <th colspan="3">&nbsp;</th>
  </tr>
  <tr>
    <th class="time">09:00 - 09:30</th>
    <td colspan="3">
      <p class="desc">報到</p>
    </td>
  </tr>
  <tr>
    <th class="time">09:00 - 09:30</th>
    <td colspan="3">
      <p class="desc">開幕致詞</p>
      <ul class="speaker">
        <li>沈允默
          <span class="title">Mozilla 臺灣分公司總經理</span>
        </li>
      </ul>
    </td>
  </tr>
  <tr>
    <th class="time">09:40 - 10:10</th>
    <td colspan="3">
      <p class="desc keynote">準備好了嗎？與新 Firefox 面對面</p>
      <ul class="speaker">
        <li>Mark Mayo
          <span class="title">Mozilla 資深副總裁</span>
        </li>
      </ul>
    </td>
  </tr>
  <tr>
    <th class="time">10:10 - 10:40</th>
    <td colspan="3">
      <p class="desc keynote">WebAssembly - 新世代 Web 效能關鍵</p>
      <ul class="speaker">
        <li>David Bryant
          <span class="title">Mozilla 資深技術顧問</span>
        </li>
      </ul>
    </td>
  </tr>
  <tr class="break">
    <th class="time">10:40 - 10:50</th>
    <td colspan="3">
      Break
    </td>
  </tr>
  <tr>
    <th class="time">10:50 - 11:40</th>
    <td colspan="3">
      <p class="desc">「量子 (Quantum)」專案造就 Web 引擎大躍進 - Render, Stylo, DOM 與 Network</p>
      <ul class="speaker column">
        <li>張志鵬
          <span class="title">Mozilla 研發經理</span>
        </li>
        <li>蔡欣宜
          <span class="title">Mozilla 研發經理</span>
        </li>
        <li>吳先祐
          <span class="title">Mozilla 資深研發經理</span>
        </li>
        <li>墨俊凱
          <span class="title">Mozilla 資深主任軟體工程師</span>
        </li>
      </ul>
    </td>
  </tr>
  <tr>
    <th class="time">11:40 - 12:00</th>
    <td colspan="3">
      <p class="desc">Photon: Firefox 與前端開發的全新觀點</p>
      <ul class="speaker">
        <li>簡冠庭
          <span class="title">Mozilla 研發經理</span>
        </li>
      </ul>
    </td>
  </tr>
  <tr class="break">
    <th class="time">12:00 - 13:00</th>
    <td colspan="3">
      Lunch
    </td>
  </tr>


  <tr >
    <th>&nbsp;</th>
    <th>
      <p><span>議程 A：</span>Web 發展最速報</p>
    </th>
    <th>
      <p><span>議程 B：</span>瀏覽器最夯趨勢</p>
    </th>
    <th>
      <p><span>議程 C：</span>新興技術最吸睛</p>
    </th>
  </tr>

  <tr >
    <th class="time">13:00 - 13:50</th>
    <td class="track1">
      <p class="desc">親愛的，我的網頁壞了 - <br>讓瀏覽器和網頁處得來之道</p>
      <ul class="speaker">
        <li>蔡孟達
          <span class="title">Mozilla 軟體工程師</span>
        </li>
      </ul>
    </td>
    <td class="track2">
      <p class="desc">Firefox 新開發者工具重點整理</p>
      <ul class="speaker">
        <li>林育民
          <span class="title">Mozilla 資深軟體工程師</span>
        </li>
        <li>簡穎超
          <span class="title">Mozilla 前端工程師</span>
        </li>
      </ul>
    </td>
    <td class="track3">
      <p class="desc">虛實整合：當 Web 與實體產生互動</p>
      <ul class="speaker">
        <li>Dietrich Ayala
          <span class="title">Mozilla 技術傳教士</span>
        </li>
      </ul>
    </td>
  </tr>

  <tr >
    <th class="time">13:50 - 14:40</th>
    <td class="track1">
      <p class="desc">Modern Layout : CSS Grid</p>
      <ul class="speaker">
        <li>陳尚哲
          <span class="title">Mozilla 研發經理</span>
        </li>
      </ul>
    </td>
    <td class="track2">
      <p class="desc">WebExtension 最新發展</p>
      <ul class="speaker">
        <li>洪嘉涓
          <span class="title">Mozilla 研發經理</span>
        </li>
      </ul>
    </td>
    <td class="track3">
      <p class="desc">WebVR - 迎向跨平台 VR 內容開發</p>
      <ul class="speaker">
        <li>穆道聖
          <span class="title">Mozilla 資深軟體工程師</span>
        </li>
        <li>曾世威
          <span class="title">Mozilla 主任軟體工程師</span>
        </li>
      </ul>
    </td>
  </tr>

  <tr class="break">
    <th class="time">14:40 - 14:50</th>
    <td colspan="3">Break</td>
  </tr>
  <tr >
    <th class="time" rowspan="2">14:50 - 15:40</th>
    <td rowspan="2" class="track1">
      <p class="desc">Binary AST - <br>在瀏覽器上加速 Javascript 頁面載入</p>
      <ul class="speaker">
        <li>Naveed Ihsanullah
          <span class="title">Mozilla 資深研發經理</span>
        </li>
      </ul>
    </td>
    <td class="track2">
      <p class="time"><span>14:50-15:20</span></p>
      <p class="desc">多媒體的過去，現在和未來</p>
      <ul class="speaker">
        <li>吳嘉富
          <span class="title">Mozilla 研發經理</span>
        </li>
      </ul>
    </td>
    <td class="track3" rowspan="2">
      <p class="desc">共聲計畫</p>
      <ul class="speaker">
        <li>Kelly Davis
          <span class="title">Mozilla 研發經理</span>
        </li>
      </ul>
    </td>
  </tr>
  <tr >
    <td class="track2" rowspan="2">
      <p class="time"><span>15:20-15:55</span></p>
      <p class="desc">與 Fennec 一同做 App - <br>用 PWA 及 CustomTab</p>
      <ul class="speaker">
        <li>朱立傑
          <span class="title">Mozilla 資深軟體工程師</span>
        </li>
      </ul>
    </td>
  </tr>
  <tr >
    <th class="time" rowspan="2">15:40 - 16:30</th>
    <td class="track1" rowspan="2">
      <p class="desc">HTTP2 建構的理想世界</p>
      <ul class="speaker">
        <li>徐國鐘
          <span class="title">Mozilla 軟體工程師</span>
        </li>
      </ul>
    </td>
    <td class="track3" rowspan="2">
      <p class="desc">平行瀏覽器引擎</p>
      <ul class="speaker">
        <li>呂行
          <span class="title">Mozilla 資深軟體工程師</span>
        </li>
      </ul>
    </td>
  </tr>
  <tr >
    <td class="track2">
      <p class="time"><span>15:55-16:30</span></p>
      <p class="desc">捍衛用戶隱私權 - <br>瀏覽器指紋追蹤技術大解密</p>
      <ul class="speaker">
        <li>曾祥信
          <span class="title">Mozilla 研發經理</span>
        </li>
      </ul>
    </td>
  </tr>
</table>