1

I have the following markup:

<table class="someclass">
  <thead>
    <tr>
      <td>
        <div>
          <h1>Click to change height</h1>
        </div>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>(repeated many times)
      <td>some text</td><td>some other text</td>
    </tr>
  </tbody>
</table>

and the following styling:

tbody {
  display:block;
  overflow:auto;
}
table {
  height:200px;
}

currently the <h1> has some jquery that ultimately changes the height of its parent (and i'd assume the height of the <thead>.) The <table> should maintain it's height and the <tbody> should shrink to fit. currently what I have is working in webkit (chrome and safari) and failing miserably in IE and Firefox. most questions I see have the reverse issue and I am perplexed as to why this is happening.

edit here is the jQuery:

$(".someclass h1").click(function(){
  $(this).parent().css("height", "150px");
});

http://jsfiddle.net/kXCX6/2/ (this is behaving the way I want, my code is not behaving this way even though it is structurally identical)

mgbowe1
  • 51
  • 8
  • Please, don't enclose text between tag delimiters. It gets removed and your text becomes impossible to understand. – Oscar Paz Mar 03 '14 at 17:22
  • Ehm, you have "some jquery" which changes the height of the table, and it doesn't work properly? Yet you're not showing the exact bit that doesn't work. How are we to troubleshoot? – Mr Lister Mar 03 '14 at 20:42
  • @mgbowe1 By using `display: block;` you are breaking the table layout an it causes unexpected behaviors. For further info, you can refer to [my answer here](http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody/17380697#17380697). Also there are couple of alternatives you might want to consider using them. Check the *Browser support and alternatives* section. – Hashem Qolami Mar 03 '14 at 21:19
  • I have solved my problem by changing the display properties of the tr's and td's. Not an ideal solution, but for the scope of my project significantly easier than re-doing the markup with div's and span's – mgbowe1 Mar 03 '14 at 22:18

0 Answers0