tinfanide Posted June 26, 2012 Share Posted June 26, 2012 <div><form name="queries" style="display: table;"><div style="display: table-cell; width: 250px; height: 200px;"><input type="checkbox" name="libraries" value="Lib1" />Lib1<input type="checkbox" name="libraries" value="Lib2" />Lib2<input type="checkbox" name="libraries" value="Lib3" />Lib3<input type="checkbox" name="libraries" value="Lib4" />Lib4<br /><input type="checkbox" name="items" value="title" />Title<input type="checkbox" name="items" value="barcode" />Barcode</div><div style="display:table-cell; width: 100px; height: 200px;"><input type="input" name="query" value="" /></div></form></div> Any IE8- (in my case IE7) fix for not displaying the table-cells properly? Link to comment Share on other sites More sharing options...
Ingolme Posted June 26, 2012 Share Posted June 26, 2012 If I'm remembering correctly, for the table-cell to display properly, it needs to be wrapped in an element with table-row display which is wrapped in another element with table display. Link to comment Share on other sites More sharing options...
tinfanide Posted June 28, 2012 Author Share Posted June 28, 2012 If I'm remembering correctly, for the table-cell to display properly, it needs to be wrapped in an element with table-row display which is wrapped in another element with table display. <form name="queries"><table style="display: table; height: 50px;"> <tr style="display: table-row;"> <td style="display: table-cell; width: 250px;"> <input type="checkbox" name="libraries" value="Lib1" />Lib1 <input type="checkbox" name="libraries" value="Lib2" />Lib2 <input type="checkbox" name="libraries" value="Lib3" />Lib3 <input type="checkbox" name="libraries" value="Lib4" />Lib4 <br /> <input type="checkbox" name="items" value="title" />Title <input type="checkbox" name="items" value="barcode" />Barcode </td> <td style="display:table-cell; width: 100px;"> <input type="input" name="query" value="" /> </td> </tr></table></form> Yes, you are right. But display: table-row only goes with <table>, not <div>. Link to comment Share on other sites More sharing options...
Ingolme Posted June 28, 2012 Share Posted June 28, 2012 <form name="queries"><table style="display: table; height: 50px;"> <tr style="display: table-row;"> <td style="display: table-cell; width: 250px;"> <input type="checkbox" name="libraries" value="Lib1" />Lib1 <input type="checkbox" name="libraries" value="Lib2" />Lib2 <input type="checkbox" name="libraries" value="Lib3" />Lib3 <input type="checkbox" name="libraries" value="Lib4" />Lib4 <br /> <input type="checkbox" name="items" value="title" />Title <input type="checkbox" name="items" value="barcode" />Barcode </td> <td style="display:table-cell; width: 100px;"> <input type="input" name="query" value="" /> </td> </tr></table></form> Yes, you are right. But display: table-row only goes with <table>, not <div>. display: table-row will work on any element. The point of the display property is to make an element behave like something it is not.The <tr> element doesn't need "display: table-row" because it already is a table row. Link to comment Share on other sites More sharing options...
tinfanide Posted June 28, 2012 Author Share Posted June 28, 2012 display: table-row will work on any element. The point of the display property is to make an element behave like something it is not.The <tr> element doesn't need "display: table-row" because it already is a table row. But it really doesn't work in IE7, <style>.form_style{display: table-cell;width: 250px; height: 40px;}</style></head><body><form name="queries"><div style="display: table;"><div style="display: table-row;"><div class="form_style"><input type="checkbox" name="libraries" value="Lib1" />Lib1<input type="checkbox" name="libraries" value="Lib2" />Lib2<input type="checkbox" name="libraries" value="Lib3" />Lib3<input type="checkbox" name="libraries" value="Lib4" />Lib4<br /><input type="checkbox" name="items" value="Title" />Title<input type="checkbox" name="items" value="Barcode" />Barcode</div><div class="form_style"><input type="input" name="query" value="" /></div></div></div></form> Link to comment Share on other sites More sharing options...
Ingolme Posted June 28, 2012 Share Posted June 28, 2012 According to compatibility research, table, table-row and table-cell are only supported on Internet Explorer 8 and above.http://www.quirksmode.org/css/display.html Link to comment Share on other sites More sharing options...
tinfanide Posted June 29, 2012 Author Share Posted June 29, 2012 According to compatibility research, table, table-row and table-cell are only supported on Internet Explorer 8 and above.http://www.quirksmod...ss/display.html Then I just stick to using <table>.Thanks for pointing to the reference. Quirksmod is always a good one. Link to comment Share on other sites More sharing options...
boen_robot Posted June 30, 2012 Share Posted June 30, 2012 Only if your data is tabular, yes.If not, no - you should instead stick to NOT using <table> and use something else (like positioning or floats) to achieve a table-like appearance.Ideally, you may just... not care... about IE7. If that's an option. I mean, based on latest browser statistics, IE7 has a worldwide market share of 2.54%. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.