jquery - 当我使用 CSS 为该行中的单元格添加边框时，如何锁定表格行的高度？

Question

我有一些 jQuery 脚本，当我单击它时它正在选择一个单元格，我希望行不改变高度。

我已经使用 CSS 设置了表格行的高度，但是当我更改一个单元格的边框时，整行的高度都会发生变化....

我尝试使用 Table-Layout Css 属性，但这没有帮助。有什么想法吗？

    .EditTable td
    {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        border-right: 1px solid #C1C1C1;
        border-bottom: 1px solid #C1C1C1;
        height: 26px;
        cursor:default;
        font-family: arial;
        font-size: 0.8em;
    }

    .EditTable td input
    {
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
        cursor:default;
        text-align: right;
        background-color: white;
        color: black;
        border: 0;
        outline: none;
        outline-offset: 0;
    }

<table class="EditTable" cellpadding="0" cellspacing="0">

      <tr>
            <td>
                <div style="">0</div>
            </td>
            <td>
                <div style="">0 akudsfsa fdhsad fiasgdf swae</div>
            </td>
            <td id="tempid1" class="highlightableTDCell">
                <div class="tempDiv">
                    <input id="Text2" value="0.00"/>
                </div>
            </td>
      </tr>

      <tr>
            <td>
                <div style="">0</div>
            </td>
            <td>
                <div style="">0 akudsfsa fdhsad fiasgdf swae</div>
            </td>
            <td id="Td1" class="highlightableTDCell">
                <div class="tempDiv">
                    <input id="Text1" value="0.00"/>
                </div>
            </td>
      </tr>

</table>



//highlighting cell
gridview.prototype.borderiseTDCell = function (obj) {
    //jQuery('#' + obj.id + ' div input').blur();

    jQuery(obj).find('div input').blur();
    this.unBorderiseTDCells();
    var jQueryTableCell = jQuery('#' + obj.id);
    jQueryTableCell.css('border', '2px solid #000000');

};

gridview.prototype.unBorderiseTDCells = function () {

    var cellToUnHighLight = jQuery('.highlightableTDCell');
    cellToUnHighLight.css('border-width', '0px 1px 1px 0px');
    cellToUnHighLight.css('border-color', '#C1C1C1');
};

Answer 1

这就是 W3C box model 的方式作品。当您使用 CSS height 时，您设置的是元素内容的高度，不包括填充和边框。

由于您是通过 jQuery 向单元格添加边框，因此您应该重新计算高度以补偿边框的额外像素。