javascript - テーブルの特定の要素を回避するテーブルレイアウトを回避する方法は?

Question

だから私はテーブルレイアウトを固定して使用しようとしてきましたが、コンテンツが最大の幅になるようにしましたが、すべてのデータにそれが発生することは望ましくありません。それらのいくつかは、同じ行にある兄弟によってではなく、コンテンツ自体によって幅を持つ必要があります。これがコードです

 <table>
    <tbody>
     <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <th>2012</th>
        <th>2011</th>
        <th>Var</th>
     </tr>
     <tr>
        <td class="day">M</td>
        <td class="date">3</td>
        <td>300,500</td>
        <td>300,500</td>
        <td>0%</td>
     </tr>
     <tr>
        <td class="day">T</td>
        <td class="date">4</td>
        <td>300,500</td>    
        <td>300,500</td>
        <td>0%</td>
     </tr>
  </tbody>

そしてここにCSSがあります

table {
    float: left;
    width: 100%;
    height: auto;
    margin-top: 20px;
    table-layout: fixed;
    display: table;
    }
table tr{
   border-bottom: 1px solid #ccc;
   width: 100%;
}
table tr th{
    text-align: center;
}
table tr td{
    display: table-cell;
    text-align: center;        
}

だから問題は、テーブルセル関数を避けるために、クラスの日付と日の td に width = auto のような独自の幅を持たせたいということです。あなたは私が何をすべきだと提案していますか。CSS でこれを行うことはできますか、それともスクリプトを作成する必要がありますか。