We always have this case specially using DataList control in ASP.NET as if its asked to use Table format; it creates table in which height of cell goes off.
You can see that column are repeated for each set of data and in which first cell is messing around with the design. By some reason height of that cell gets increased, most of the time content of that cell is larger than adjacent cells.
I found solution with JQuery, which search for given cell and set the maxing height to all Cell. Following is function which allow us to get rid of this issue.
function MakeSameHeight(className) {
var maxheight = 0;
$(document).ready(function () {
$(className).each(function () {
if ($(this).height() > maxheight) {
maxheight = $(this).height();
}
});
$(className).each(function () {
if ($(this).height() != 0)
$(this).height(maxheight);
});
});
}
For this to work fine, you have to assign some fake class to those table cell which you need to consider to have same in height. So create fake class and assign this to all required table cell.
And following code to call MakeSameHeight function.
MakeSameHeight('.accessories_nametd');
Note: Its using JQuery hence you need to include appropriate js file from jquery.com