テーブル th, td 幅調整

HTML CSS

IE11

th と td は 2 つで 1 つ

f:id:mat5ukawa:20150819232256p: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 id="maintable">
      <tr class="header">
        <th class="left">LEFT</th>
        <th class="right">RIGHT</th>
      </tr>
      <tr class="datas">
        <td>one</td>
        <td>two</td>
      </tr>
    </table>
  </body>
</html>

main.css

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

#maintable {
  width: 500px; /* define parent width on table elem */
  table-layout: fixed;
}

#maintable .header .left {
  width: 100px;
  background-color: #00DDFF;
}

#maintable .header .right {
  width: 400px;
  background-color: #DDEEFF;
}

#maintable .datas td {
  background-color: #F0F0F0;
}

[table + td] と th 無しで幅調整する方法があるらし(未検証)

ヘッダあってのテーブルだと思うので、横道な感触は否めない

stackoverflow.com