Рендерер ThreeJS меняет размер родителя

Question

Я пытаюсь отобразить фиксированный контейнер 550 x 500 внутри таблицы для отображения трехмерного объекта, но по какой-то причине, когда я вызываю container.appendChild(renderer.domElement);, мой родительский контейнер меняет свой размер на 590 x 501, любые идеи о том, как это исправить поведение?

HTML:

<table>
    <tbody>
        <tr>
            <td>
                <img src="img/obj/cojin1.jpg" class="img-responsive" alt="">
            </td>
            <td rowspan="3" id="canvas">
            </td>
        </tr>
        <tr>
            <td><img src="img/obj/cojin2.jpg" class="img-responsive" alt=""></td>
        </tr>
        <tr>
            <td><img src="img/obj/cojin3.jpg" class="img-responsive" alt=""></td>
        </tr>
    </tbody>
</table>

JS:

if (WEBGL.isWebGLAvailable() === false) {
    document.body.appendChild(WEBGL.getWebGLErrorMessage());
}

var container, stats, controls, containerWidth, containerHeight;
var camera, scene, renderer, light, textureLoader;

init();
//loadfbx();
//animate();

function init() {
    container = document.getElementById('canvas');
    containerWidth = 550;
    containerHeight = 500;

    camera = new THREE.PerspectiveCamera(40, containerWidth / containerHeight, 0.1, 100);
    camera.position.set(0, 3, 3);

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xFFFFFF);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(containerWidth, containerHeight, false);
    container.appendChild(renderer.domElement);
    renderer.render(scene, camera);
}

Answer 1

Это вызвано заполнением ячейки. Вы можете исправить это через css

<td rowspan="3" id="canvas" style="padding: 0;height: 500px;display: block;">