2

I'm working with a table built solely with CSS classes. (I understand that using html table tags is often okay for tabular data, but the boss expressed a preference for CSS.) This isn't the code, but it's put together basically like this:

<div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

<div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

I'm working towards a script in JS (making use of jQuery) that will compare the height of each cell in the row and set all cells' height to the maximum found in their row. I tried using display: table-row and the like instead, but it yielded funky results.

I'd like to do this with a simple loop. I know how I'd do it if each row were a different class (.hasClass()) but I do not know how to only iterate over one in that class at a time. I tried documentation and a number of web searches before turning to StackOverflow. I found a similar question (Selecting only one div of entire css class in jQuery) but could not see how that solution applied to my problem. I'm new to these technologies, so please, keep it simple for me, and forgive me if the answer is terribly obvious.

Community
  • 1
  • 1
user42795
  • 41
  • 2
  • Hm...I'd actually think that this styling should be possible without any JavaScript. That's usually what tables exist for. How do the divs look if you apply a (debug-only) CSS rule to give all divs a black border? – Katana314 May 15 '15 at 18:24
  • @Katana314 Agreed just posted my answer – Starboy May 15 '15 at 18:28

2 Answers2

2

You should select the row then use the children function to set the height

function SetHeight() {
    $('.row').each(function(i,v) {
        var cells = $(v).children('.cell');
        var maxHeight = 0;
        cells.each(function(index, value){
            maxHeight = Math.max($(value).height(),maxHeight);
        });
        cells.css('height',maxHeight+'px');
  }
}
Rolyataylor2
  • 201
  • 1
  • 5
0

You don't need Javascript to do this just use CSS!

Just add a container element, style with display:table then corresponding elements as table-row and table cell. No need for the extra overhead with JS here!

Here's a fiddle

.table  { display: table; }
.row    { display: table-row; }
.cell   { display: table-cell; border:1px solid green; }
Starboy
  • 1,635
  • 3
  • 19
  • 27
  • Thank you, but I did actually try that, and the results overrode my layout (in Bootstrap) with columns of equal width. The look of this table is as important as the data, I'm afraid. Do you know of a way to use `display: table` without that result? – user42795 May 15 '15 at 18:30
  • @user42795 if you could provide me with your actual code yes. But without that I have no idea what your 'actually' trying to work with here. The above will work in boostrap just make sure you name your classes so they dont conflict with existing bootstrap named classes. IE: do .myTable, .myRow, .myCell – Starboy May 15 '15 at 18:32