Platzieren einer Leinwand genau in einer Tabellenzelle

Question

Wenn ich "canvas" -Tag innerhalb eines "td" -Tags platziere, erhöht es automatisch die Spaltenbreite, es gibt viel Polsterung. Ich möchte, dass meine Leinwand genau in eine Tabellenzelle passt.

Das ist mein CSS!

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

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

#animationCanvas_1{ 
background-color: black;} 

Jemand bitte helfen Sie mir!

<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

Nun, müssen Sie für Ihre table

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

jsFiddle

verwenden, aber es ist eine andere Art und Weise, es zu beheben, die width für td

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

verwenden

jsFiddle

und wenn Sie Problem mit Ihrem canvas für reaktions Fall, sollten Sie width: 100%; für die Leinwand gesetzt.