Praveen Rawat Praveen Rawat - 1 month ago 6
HTML Question

Find the column which are taking max space?

Is it possible in JQuery or JavaScript to find thoes rows of a HTML table whose columns are taking max space.

like in the below image


  • for column 1, 3rd row is taking max space

  • for column 2, 1st row is taking max space

  • for column 3, 2nd row is taking max space



enter image description here

Answer

tds will have same width. You will have to add a wrapper div with display: inline-block. This will enforce div to take with of content.

Then you will have to loop over columns and inside it again on rows and neglect header and calculate width and add class

Updated Fiddle

$(function() {
  var $tr = $("table tr").not(':eq(0)');
  var len = $tr.eq(1).find('td').length;
  for (var col = 0; col < len; col++) {
    var _el = null;
    var _width = 0;
    for (var row = 0; row < $tr.length; row++) {
      var curEl = $tr.eq(row).find('td:eq(' + (col) + ')');
      var divWidth = curEl.find('div:first').width()
      if (divWidth > _width) {
        _width = divWidth;
        _el = curEl
      }
    }
    _el.addClass('red-border')
  }
})
.red-border {
  border: 1px solid red;
}
table div {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr>
    <th>Table Header11</th>
    <th>Table Header11111</th>
    <th>Table Header111</th>
  </tr>
  <tr>
    <td>
      <div>
        Table cell111
      </div>
    </td>
    <td>
      <div>
        Table cell1111
      </div>
    </td>
    <td>
      <div>
        Table cell111111
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        Table cell11111</div>
    </td>
    <td>
      <div>
        Table cell111
      </div>
    </td>
    <td>
      <div>
        Table cell11
      </div>
    </td>
  </tr>
</table>

Note: I was lazy, so I added this in css table div. Please add a custom class or a proper selector that does not overrides everything