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.
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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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.
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:
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
109 Points
374 Posts
Display set to Block Changes Width behaviour
Dec 05, 2017 02:45 AM|Madog|LINK
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.
Contributor
6730 Points
2715 Posts
Re: Display set to Block Changes Width behaviour
Dec 05, 2017 09:08 AM|Eric Du|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
109 Points
374 Posts
Re: Display set to Block Changes Width behaviour
Dec 06, 2017 05:14 AM|Madog|LINK
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.
Contributor
6730 Points
2715 Posts
Re: Display set to Block Changes Width behaviour
Dec 12, 2017 09:34 AM|Eric Du|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.