Set CSS table height to x number of rows heights combined

Question

I am doing a 'quick' css fix for one of our OCD product owners, I have table that is 500px in height, it displays anything from no rows to thousands, the overflow is set to scroll so you can scroll down the list of items.

Each row/item has an initial height of *26px, but it does not truncate information - the PO does not want truncation. So the height is really determined by how big the description is or how much you detail you wish to apply.

On the initial page load, if there is a row or two that is taller than its neighbours the line items don't sit flush within the table. (You can imagine what happens inside of someone with OCD when tables don't sit flush)

The only way i can see myself getting this right, is to use some JS/jQuery to set the table height to the first say 20 of its children's heights - since the heights vary depending on how many lines there are / temperature of the day / number of beers you have had

Something like this:

$(document).ready(function(){
  $("#push_state_container").height( $(".list_box").height() + 50);
});

This should set the outside containers height to the height of the div that holds all the items plus 50px. Only i need to find the heights of say the first 20 items within .list_box find their height and add 50px to that.

Before i do something stupid and complex i was hoping that there would be a better way of doing this? The reservation i have with using jQuery here is that #table_name is a hook for a lot of crazy coffee script, and i am afraid that its going to conflict somehow.

---

Here is the CSS for the table

#push_state_container {
  height: 500px;
  width: 1116px;
  position: relative;
  border: 1px solid #ccc;
  > div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    -webkit-transition: left 0.8s ease;
    -moz-transition: left 0.8s ease;
    -ms-transition: left 0.8s ease;
    -o-transition: left 0.8s ease;
    transition: left 0.8s ease;
    .loading {
      text-align: center;
      padding-top: 180px;
      font-size: 150%;
      color: #666 ;
      background: url(/assets/spinner.gif) no-repeat 490px 183px;
    }
    .container {
      position: relative;
      height: 100%;
      .list_box_header {
        border-width: 0 0 1px 0;
      }
      .list_box {
        border-width: 1px 0 0 0;
        height: 450px;
        > div:nth-child(even) {
          background: #eef8ff;
        }
        > div.hovered_item:nth-child(even) {
          background: #ccc;
        }
        .selected_item {
          background: #fff;
          color: #111;
          &.hovered_item {
            background-color: #ddd;
          }
        }
      }
      .bottom_links, .bottom_buttons {
        position: absolute;
        display: block;
        height: 2.2em;
        background: #eee;
        background: rgba(238, 238, 238, 0.95);
        border-top: 1px solid #ddd;
        width: 100%;
        bottom: 0;
        left: 0;
      }
      .bottom_buttons {
        height: 2.3em;
        padding: 0.2em 0 0.2em 0.5em;
        div.text, a.undo {
          display: inline-block;
        }
      }
    }
  }
  .right.float_above {
    position: absolute;
    top: -2em;
    right: 0;
    a {
      font-weight: normal;
      font-size: 80%;
    }
  }
}

The #push_state_container is the outside table has a fixed height of 500px, the .list_box is the div that houses all the line items and has a set height of 450px, as you can see it color's the nth-child even elements.

I am hoping there is a way to do this JSFiddle

Taking to account there is an undetermined number of items and not just one.

Answer 1

You can iterate through the first 20 rows and get their heights. Your selector should not "conflict" unless something else is setting a height on your wrapper. You aren't setting any listeners or anything. There might be an issue with timing; I see you have spinner CSS - this would need to happen after the content is populated.

Please see a demo below. Note that HTML and CSS are for demo only.

(function() {
  var heights = 0,
      $rows = $("table.scrolling tr"),
      len = $rows.length,
      NUMBER_ROWS_TO_SHOW = 10;
  
  for(var i = 0; i < NUMBER_ROWS_TO_SHOW && i < len; i++) {
    heights += $rows.eq(i).height();
  }
  
  $rows.closest('.wrapper').height(heights);
}());

body {
  font-family: sans-serif;
  font-size: 12px;
  line-height: 1.5;
}
table {
  border-collapse: collapse;
}
td {
  border: 1px solid #000;
  min-height: 18px; /* one line of text */
  padding: 5px 10px;
  text-align: top;
}
td:first-child,
td:last-child {
  white-space: nowrap; /* To get the wrapping happening in the middle row */
}
.wrapper {
  height: 190px; /* assuming all rows are 1 line, show first 10 rows */
  overflow-y: auto;
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <table class="scrolling">
    <tr>
      <td>Condimentum</td>
      <td>suspendisse eleifend suspendisse commodo iaculis</td>
      <td>elementum parturient</td>
    </tr>
    <tr>
      <td>a cum nulla</td>
      <td>inceptos integer platea nam vel nullam volutpat parturient habitant litora consectetur. Taciti eros potenti adipiscing a a mi augue auctor rhoncus feugiat fringilla nulla maecenas ipsum vestibulum eget</td>
      <td>cubilia a consectetu</td>
    </tr>
    <tr>
      <td>eu parturient.</td>
      <td>condimentum posuere integer in nam orci a phasellus a nisi. Praesent</td>
      <td>sed aptent a enim</td>
    </tr>
    <tr>
      <td>rhoncus nisi parturient</td>
      <td>Quisque at parturient nec mauris odio vestibulum montes a risus aliquam consectetur quam integer id elit. Parturient non egestas sagittis eget eleifend adipiscing parturient blandit aptent adipiscing quis egestas condimentum adipiscing facilisi
        nam. Bibendum ridiculus parturient laoreet mi vivamus senectus consectetur</td>
      <td>nascetur rhoncus</td>
    </tr>
    <tr>
      <td>imperdiet semper</td>
      <td>a eu et quis nibh arcu natoque dui dapibus. A condimentum at</td>
      <td>lacus nostra sem molestie</td>
    </tr>
    <tr>
      <td>ullamcorper dis nullam torquent</td>
      <td>nisi parturient. Gravida dolor hac phasellus euismod dictum</td>
      <td>eleifend commodo parturient</td>
    </tr>
    <tr>
      <td>dictumst pharetra parturient enim potenti natoque et.</td>
      <td>Inceptos aptent varius convallis non magnis dignissim pulvinar</td>
      <td>vestibulum</td>
    </tr>
    <tr>
      <td>scelerisque tellus</td>
      <td>Neque orci curabitur consectetur justo taciti adipiscing id elementum</td>
      <td>ullamcorper ad mus</td>
    </tr>
    <tr>
      <td>facilisi ac. Felis venenatis</td>
      <td>vestibulum tincidunt pharetra euismod natoque et in risus.</td>
      <td>Litora auctor
      </td>
    </tr>
    <tr>
      <td>elit a suspendisse</td>
      <td>himenaeos est orci hac a malesuada a urna sed vehicula a a magna vestibulum a</td>
      <td>hac diam.</td>
    </tr>
    <tr>
      <td>dolor quis aptent</td>
      <td>Consectetur porttitor diam euismod fringilla nisl donec a a vestibulum</td>
      <td>egestas tellus</td>
    </tr>
    <tr>
      <td>Vestibulum velit</td>
      <td>tincidunt elit facilisis donec et est. Consequat urna sagittis dis ut augue cras</td>
      <td>penatibus aliquam</td>
    </tr>
    <tr>
      <td>suspendisse ante vestibulum</td>
      <td>A scelerisque taciti a nisl ac ac a a a taciti a odio imperdiet a imperdiet id sapien.</td>
      <td>Vestibulum est est</td>
    </tr>
    <tr>
      <td>Fermentum rutrum auctor</td>
      <td>ac consequat sem ad ligula suspendisse molestie euismod ac vestibulum felis. Dignissim adipiscing</td>
      <td>parturient sociis quam</td>
    </tr>
    <tr>
      <td>dictumst. Quam aliquam</td>
      <td>nibh ullamcorper etiam varius habitasse venenatis a facilisis scelerisque.</td>
      <td>Vitae ultricies sed himenaeos</td>
    </tr>
    <tr>
      <td>ultrices pretium lacus</td>
      <td>viverra aliquam parturient mattis a euismod hac eu phasellus semper. Gravida cursus diam suscipit varius</td>
      <td>lobortis inceptos dictumst</td>
    </tr>
    <tr>
      <td>purus facilisis habitant nam.</td>
      <td>Malesuada mi ornare velit mi dictumst potenti ut a scelerisque id himenaeos class enim a</td>
      <td>suspendisse habitant</td>
    </tr>
    <tr>
      <td>nisl ad a lorem adipiscing ad</td>
      <td>Feugiat lacus a et consectetur parturient lacinia nam iaculis suspendisse parturient parturient</td>
      <td>a vestibulum a vel id potenti</td>
    </tr>
  </table>
</div>

<p>Felis dis posuere lacinia etiam taciti a adipiscing pulvinar auctor consectetur neque eu commodo congue malesuada parturient ullamcorper facilisi a leo donec nisi. Eu ante habitasse a in ut parturient vestibulum aliquet vivamus facilisi maecenas non cubilia a parturient pulvinar libero nisi rhoncus taciti duis vel elit sociis. Cras ullamcorper tempor a diam a est nunc nunc scelerisque aptent sit ullamcorper blandit potenti montes a vulputate lacus vestibulum rutrum. Suspendisse parturient vestibulum at a et aptent mus nisl proin et a habitant vestibulum potenti lacinia consequat dignissim a velit in euismod parturient a. Parturient eleifend ullamcorper vivamus odio parturient vestibulum ullamcorper sociis sem adipiscing fusce ullamcorper dolor laoreet molestie libero tristique a ac vehicula turpis tempor accumsan a laoreet duis suspendisse.</p>