マルチヘッダ (multi th)(1 つの th 内に要素を多数設置して線区切り) の構築

HTML CSS

表題通り

mac-safari 8.0.7

アウトプットイメージは下

f:id:mat5ukawa:20150818230834p:plain

workspace
|
|--- index.html
|--- main.css

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>titleExapmle</title>
    <meta name="description" content="pageDescription">
    <link rel="stylesheet" type="text/css" href="main.css"/>
  </head>
  <body>
    <table>
      <tr>
        <th class="single_header">mono header</th>
        <th class="multi_header">
          <div class="top_header">this is...</div>
          <div class="bottom_header">multi header world</div>
        </th>
      </tr>
      <tr>
        <td>one</td>
        <td>two</td>
      </tr>
      <tr>
        <td>three</td>
        <td>four</td>
    </table>
  </body>
</html>

main.css

th.single_header {
  background-color: #CDCDCD;
}

.multi_header {
  width: 500px;
  padding: 0;
  /* if not padding: 0,
   * a little border space will exist
   * around .top_header & bottom_header
   */
}

th.multi_header .top_header {
  background-color: #00F5FF;
  border-bottom: 1px #000000 solid;
}

th.multi_header .bottom_header {
  background-color: #EFEFEF;
}

table, th, td {
  border: 1px #000000 solid;
  border-collapse: collapse;
}

参考

stackoverflow.com