I have this project: https://jsfiddle.net/5buqm78c/ The problem is that when I apply the filters, the table is show with the incorrect css style. I have set the table min-with to 100%, but when apply the filter (search button), it seems that the table auto adjusts the width of the columns itself to match the content of the column, and does not span 100%. I don't know if it is because the JS code or the css.
.calendar-table {
border-collapse: collapse;
margin: 10px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 100% !important;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
table-layout: fixed !important;
}
Thanks for the help.
When you're displaying the table you're using display: block, rather than display: table. This means it's behaving like a block element when it's being shown.
Change this:
if (htmlShow.style.display === "none") {
htmlShow.style.display = "block";
} else {
htmlShow.style.display = "block";
}
to this:
if (htmlShow.style.display === "none") {
htmlShow.style.display = "table";
} else {
htmlShow.style.display = "table";
}