テーブルセル内にキャンバスを正確に配置する

Question

「キャンバス」タグを「td」タグ内に配置すると、自動的に列幅が増えます。私は自分のキャンバスが表のセルの中に正確に収まるようにしたい。

これは私のCSSです！

.mainTable{ 
width:100%; 
height: 1000px; 
border: 1px solid black;} 

td{ 
border: 1px groove black; 
padding: 1px;} 

#animationCanvas_1{ 
background-color: black;} 

誰かが私を助けてください！

<table class="mainTable"> 

    <tr id="headingTable"> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 

    <tr id="rowFirst">     <!-- reflecting balls --> 
     <td> 
      <canvas id="animationCanvas_1"> 

      </canvas> 
     </td> 
     <td></td> 
     <td></td> 
    </tr> 

    <tr id="rowSecond">     <!-- growing circle with changing color --> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 

    <tr id="rowThird">     <!-- animation with css only --> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 

    <tr id="rowFourth">     <!-- random rectangle --> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 

    <tr id="rowFifth">     <!-- rotating objects --> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 

</table> 

Answer 1

さて、あなたはあなたのtable

.mainTable { 
    width: 100%; 
    height: 1000px; 
    border: 1px solid black; 
    table-layout: fixed; 
} 

jsFiddle

ためを使用する必要がありますが、td

td { 
    border: 1px groove black; 
    padding: 0; 
    width: 33%; 
} 

ため widthを使用し、それを修正する別の方法があります

jsFiddle

、あなたが応答する場合のために、あなたのcanvasの問題を持っている場合、あなたはキャンバスのためwidth: 100%;を設定する必要があります。