locked
Display set to Block Changes Width behaviour RRS feed

  • Question

  • User438705957 posted

    I have a table element inside a div with a Bootstrap class of 'table'.
    Through developer tools, I can see that by default, there is no 'display' property being set on the table, but it has a width of 100%.

    I initially want to hide the table while the data loads and instead show a loader graphic.

    So at first I hide the table using jQuery 

    $('#table_data').css('display', 'block'); 

    After the tables loaded, I show it again using jQuery

    $('#table_data').css('display', 'block');

    This worked fine, except that when I reduced the number of columns, it suddenly started to mess around with the width of the table.

    I worked this out as being the result of jQuery adding an inline style element which sets display to 'block'.

    I have resolved my issue by just removing the attribute after the data loads.
    $('#table_data').removeAttr('style');

    My question i s why does setting display to 'block', mess around with the width of the element.

     

    Tuesday, December 5, 2017 2:45 AM

Answers

All replies

  • User-1838255255 posted

    Hi madog,

    According to your description, as far as i know, the table default is dispaly:table. You set it as display: block, it will act as div(block element), so you could set the width and height of the table in style code, i am not clear you how to set the style of the table and column? So i hope you could post your complete code for us to check, this will better help you solve the problem. 

    Best Regards,

    Eric Du  

    Tuesday, December 5, 2017 9:08 AM
  • User438705957 posted

    Hi Eric,

    The table is generated by  JavaScript code, so its a bit hard to include here, it's very long.
    I have set the width attribute for some <td> elements, but not all, once again thru code.

     To hide the table before data loading, the display property is set via jQuery
     $('#table_data').css('display', 'none');

     To show the table after data loading, the  display property is set via jQuery like so:
    $('#table_data').css('display', 'block');

    Above is how the original code causing the problem looked like.

    This is what the table generated looks like in developer tools:

    <table class="table table-curved table-striped table-condensed table-hover" id="table_data" border="0" cellspacing="0" cellpadding="0"
    style="display: block">

    <td style="width: 3%; text-align: center;">6</td><td class="full_name" style="color: blue;">Annual Fire Statement<span style="color: blue;">AFS</span></td>
    <td id="Audit_Id">22</td><td id="FullName" hidden="hidden">Annual Fire Statement</td>
    <td style="width: 5%; text-align: center;"><input class="manage_mtm btn btn-default btn-xs btn-block" role="button" type="button" value="Audit Measures" data-child="Audit_Measure" data-parent="Audit"></td></tr></tbody>
    </table>

    I've solved the problem by removing the style property all together.
    However, I am still wondering as a generic question, how does the display property influence the width of my table.

    Wednesday, December 6, 2017 5:14 AM
  • User-1838255255 posted

    Hi madog,

    According to your description, if you set the table display to block, may be it will take up 100% width of the parent element, you could try to use inline-block. 

    I think this thread may be could help you, please check:

    https://css-tricks.com/forums/topic/displayblock-creating-100-width/ 

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 12, 2017 9:34 AM