桌面高度错误

时间:2013-11-20 13:02:59

标签: html css

为什么我在这个示例中得出错误的表总高度:http://jsfiddle.net/nfb82/

我为每个细胞指定了高度和宽度。总的来说,我需要获得160x90的桌面尺寸。当我得到错误的高度时,正确计算宽度。而且,在我的网站上我获得97px,在jsfiddle例子中我有101px。 我想到了可以考虑的边界,但为什么我得到正确的宽度。此外,我试图改变高度(每个细胞高度减少1px),但无论如何我的身高都错了

HTML:

<div class="template-markup _16x9" data-template-id="2">
    <table>
        <tbody>
            <tr>
                <td rowspan="2" style="width: 128px; height: 72px;">1</td>
                <td style="width: 32px; height: 32px;">2</td>
            </tr>
            <tr>
                <td style="width: 32px; height: 40px;">3</td>
            </tr>
            <tr>
                <td colspan="2" style="height: 18px; width: 160px;">4</td>
            </tr>
        </tbody>
    </table>
    <div class="resolution">1920x1080</div>
</div>

的CSS:

.template-markup {
    float: left;
    margin-right: 20px;
}
    .template-markup table {
        border: 1px solid #333;
        border-collapse: collapse;
    }
        .template-markup table tr td {
            border: 1px solid #333;
            vertical-align: middle;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s;
        }
        .template-markup table tr td:hover {
            background-color: #DDD;
        }   
        .template-markup table tr td.selected {
            background-color: #333;
            color: #FFF;
        }
    .template-markup .resolution {
        text-align: center;
        clear: both;
        height: 30px;
        margin-top: 5px;
    }
    .template-markup._16x9 {
        width: 160px;
    }
        .template-markup._16x9 table {
            width: 160px; 
            height: 90px;
        }

1 个答案:

答案 0 :(得分:0)

我想是因为填充和边框值也在表元素上设置

http://www.w3schools.com/css/css_boxmodel.asp