将画布准确放置在表格单元格内

Question

当我将“canvas”标签放在“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-layout: fixed; <{1}}

table

<强> jsFiddle

但是有另一种方法可以解决这个问题，.mainTable { width: 100%; height: 1000px; border: 1px solid black; table-layout: fixed; }

使用width

td

<强> jsFiddle

如果您的td { border: 1px groove black; padding: 0; width: 33%; } 因响应式问题而遇到问题，则应为画布设置canvas。