Gap at end of Bootstrap table

[jdadwilson]

I am in the process of redoing a large web site with bootstrap. Everything is going smoothly except for one cosmetic issue. I use several tables within the structure and notice that at the end of a table there is a large gap. In viewing the page with "Inspect Element" nothing shows up for this area. After several hours of investigation I realized that if the table is wrapped in a col class the gap is present. If not wrapped, then there is no gap.

Any idea why this is happening and how to remove the gap if the table is wrapped in a col class?

TIA for any assistance.
jdadwilson

[Beverleyh]

We need to see an example to troubleshoot.

[jdadwilson]

Use the following steps to see an example...

1. Access the following website www.txfannin.org/new-site/sitesearch.php
2. Step 1 check the 'Books On-site' box and uncheck the 'Cemetery Records' box.
3. Step 2 enter 'George' in the first name box and 'Wilson' in the last name box.
4. Step 3 submit the 'Search'

Note that the first table is wrapped in a col class and the second table is not.

TIA for your assistance
jdadwilson

[styxlawyer]

Your CSS file "bootstrap.min.css" states that the "col-md-4" class should have a width of 33.3333333% and float left. That's what I'm seeing.

I should add that this is only for screen widths greater than 992px. For narrower screens it appears to be around 95%.

[jdadwilson]

Yes, that is the standard Bootstrap definition for col-md-4. But that has nothing to do with the gap at the bottom of the table created by the col wrap.

[styxlawyer]

That table has three classes:



<table class="table table-striped table-hover">


The class "table" is set to have "margin-bottom: 20px;" that appears to be where the gap is coming from. The "table" class is also applied to the "School Yearbooks Records" table and it has the same gap at the bottom.

[jdadwilson]

Thanks for the help. Removing the table class solved the problem but made the table collapse to a much narrower table than desired. I included the table class but set the margin-bottom to 0 which helped. I also moved the row count/TOP into the footer with a colspan for each so that the count appears to the left and the TOP to the right.

Thanks a bunch for your assistance.
jdadwilson

[styxlawyer]

You're welcome.

Some of your tables appear to have "class" attributes with no value assigned which affects table and column widths. It would probably be best to create a custom class for the tables and apply it to all of them.

[jdadwilson]

I am in the process of changing all of the site to Bootstrap. There are 100+ modules that I am working through. I converted some but not all of the tables you see. I have completed most of them but have not uploaded them to the test site.

Again, thank you for your insight and assistance.
jdadwilson

[styxlawyer]

Have fun!