table-layout「テーブルの表示方法」

<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-table{width:100%;}
.css-table th{
	background-color: #d0f0ff;
	text-align: center;
	padding:2px;
}
.css-width{width:80px;}
.css-auto{table-layout : auto;}
.css-fixed{table-layout : fixed;}

<!-- html -->
<div class="common">
  <div class="cssTitle">table-layout:auto;</div>
  <div><table border="1" class="css-auto css-table">
  <thead>
  <tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
  </thead>
  <tbody>
  <tr><td>山田　太郎</td><td>98</td><td>62</td><td>87</td></tr>
  <tr><td>鈴木　花子</td><td>85</td><td>71</td><td>58</td></tr>
  <tr><td>斉藤　一郎</td><td>66</td><td>65</td><td>52</td></tr>
  </tbody>
  <tfoot>
  <tr><th>平均</th><td>83</td><td>66</td><td>66</td></tr>
  </tfoot>
  </table><br>
  ブラウザが算出した列幅で各列を表示
  </div>
  <div class="cssTitle">table-layout:fixed; width 指定なし</div>
  <div><table border="1" class="css-fixed css-table">
  <thead>
  <tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
  </thead>
  <tbody>
  <tr><td>山田　太郎</td><td>98</td><td>62</td><td>87</td></tr>
  <tr><td>鈴木　花子</td><td>85</td><td>71</td><td>58</td></tr>
  <tr><td>斉藤　一郎</td><td>66</td><td>65</td><td>52</td></tr>
  </tbody>
  <tfoot>
  <tr><th>平均</th><td>83</td><td>66</td><td>66</td></tr>
  </tfoot>
  </table><br>
  均等割りした列幅で表示
  </div>
  <div class="cssTitle">table-layout:fixed; width 指定あり</div>
  <div><table border="1" class="css-fixed css-table">
  <thead>
  <tr><th class="css-width">氏名</th><th>国語</th><th>理科</th><th>社会</th></tr>
  </thead>
  <tbody>
  <tr><td>山田　太郎</td><td>98</td><td>62</td><td>87</td></tr>
  <tr><td>鈴木　花子</td><td>85</td><td>71</td><td>58</td></tr>
  <tr><td>斉藤　一郎</td><td>66</td><td>65</td><td>52</td></tr>
  </tbody>
  <tfoot>
  <tr><th>平均</th><td>83</td><td>66</td><td>66</td></tr>
  </tfoot>
  </table><br>
  １列目のみ指定した列幅で表示。<br>２列目以降は均等割りした列幅で表示。
  </div>
</div>