Side by side tables cause responsive plug-in issues?

chessGuru64

I successfully put an advanced smart search to the left of a datatable (like Amazon.com):
https://datatables-ecommerence.000webhostapp.com/

But the tables overlap on small screens and the datatable responsive plug in seems to fail (though it seems to work on a smart-phone). Maybe my float messes up the responsive code? Might be an interesting "glitch" or a simple fix (probably the second one).

I will try to resize things on a smaller screen (like font). Maybe that will get it to fit?

allan

Could you change:

<table class="display table table-responsive" id="smart_table">

to be:

<table class="display table table-responsive" id="smart_table" width="100%">

please. I believe that should resolve the issue.

Allan

chessGuru64

Ok. I will try that. Right now my code looks like:

    <div style="width: 100%;">
          <div style="width: 20%; float: left;">
    <table class="display table table-responsive" id="smart_table" width="100%">

    </table>
    </div>

            <div style="width: 80%; float: left;">
    <table id="example" class="display table-responsive">

    </table>
    </div></div>

I will try to put a 100% on the bottom too. Maybe I will try Boostrap col again? Did not seem to work.

UPDATE: Putting a width="100%" on both tables really helped. I may have to adjust the widths fonts etc. to get the tables to not overlap.