I am working on a jQuery script that selects a cell when clicked, and I want the row to maintain its height without changing.
Even though I have set the height of the table row using CSS, whenever I change the border of a single cell, the entire row's height adjusts...
I attempted to use the Table-Layout CSS property, but it did not solve the issue. Any suggestions on what I can do?
.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');
};