Bootstrap / flask formatting issue

Question

I've built a flask-based website utilizing the Bootstrap framework. The inspiration for this choice was Corey Schafer's YouTube series. The difficulty I'm having stems from my desire to have wide tables of data that are shared with the user, while respecting the value that Bootstrap brings to support a variety of device templates.

As you'll see, however, I'm not quite sure "what levers to pull" to accomplish my goal. For example, my desktop can accomodate wider views of the table, but something is limiting this dimension as evidenced by the empty real-estate on the right.

When I try to scale down the font size, it works for the table in the ipad version, but there must be a better way to have all text scale in proportion.

And finally, the iphone. Fortunately this appears to be the version that is working best since I can most easily zoom / modify on the device to need (and the scroll in table gives a very "controlled" feel).

Here is my css code:

body {
  background: #fafafa;
  color: #333333;
  margin-top: 5rem;
  max-width: 105%;
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.content-section {
  background: #ffffff;
  padding: 2px 5px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

.table-condensed{
  font-size: 8px;
}

Here is my html code relevant to what is displayed:

<div class="content-section">
    <form method="POST" action="" enctype="multipart/form-data">
        {{ form.hidden_tag() }}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">{{ legend }}</legend>
                <div class="btn-group-vertical" onclick="loading();">
                    {{ form.submit_autopull(class="btn btn-outline-primary") }}
                    {{ form.submit_autobren(class="btn btn-outline-primary") }}
                    {{ form.submit_autotang(class="btn btn-outline-primary") }}
                </div>
                <h6> </h6>
                <h6>This process can take 5 minutes for a large clan to compile and score games.</h6>
                <h6> </h6>

        </fieldset>
        {% if dataToShow == 1 %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">{{ legend2 }}</legend>
            <div class="table-responsive table-condensed">
                 <table class="table">{{ form.clanStats | safe }}</table>
            </div>
        </fieldset>
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">{{ legend3 }}</legend>
            <div class="media-body row flex-row flex-nowrap">
                <p class="article-content">{{ form.quartStats | safe }}</p>
            </div>
        </fieldset>

        <h6>Note: Results shown only for ladder games and experience levels 12 or greater.</h6>
        {% endif %}
    </form>
</div>

Any help that can be offered to help me understand the interaction between the components is most appreciated!

Answer 1

I suggest using D3 for the responsive table. I added an example below. I hope it will solve your problem. Let me know if it's okay or needs anything else. Thanks

        data = [
        {
        "First Name": "James",
        "Last Name": "Matman",
        "Job Title": "Chief Sandwich Eater",
        "Favorite Color": "Lettuce Green",
        "Wars or Trek?": "Trek",
        "Date of Birth": "January 13, 1979",
        "Dream Vacation City": "Gotham City",
        "GPA": "3.1",
        "Arbitrary Data": "RBX-12"
        },
        {
        "First Name": "The",
        "Last Name": "Tick",
        "Job Title": "Crimefighter Sorta",
        "Favorite Color": "Blue",
        "Wars or Trek?": "Wars",
        "Date of Birth": "July 19, 1968",
        "Dream Vacation City": "Athens",
        "GPA": "N/A",
        "Arbitrary Data": "Edlund, Ben (July 1996)."
        },
        {
        "First Name": "Jokey",
        "Last Name": "Smurf",
        "Job Title": "Giving Exploding Presents",
        "Favorite Color": "Smurflow",
        "Wars or Trek?": "Smurf",
        "Date of Birth": "Smurfuary Smurfteenth, 1945",
        "Dream Vacation City": "New Smurf City",
        "GPA": "4.Smurf",
        "Arbitrary Data": "One"
        },
        {
        "First Name": "Cindy",
        "Last Name": "Beyler",
        "Job Title": "Sales Representative",
        "Favorite Color": "Red",
        "Wars or Trek?": "Wars",
        "Date of Birth": "July 5, 1956",
        "Dream Vacation City": "Paris",
        "GPA": "3.4",
        "Arbitrary Data": "3451"
        },
        {
        "First Name": "Captain",
        "Last Name": "Cool",
        "Job Title": "Tree Crusher",
        "Favorite Color": "Blue",
        "Wars or Trek?": "Wars",
        "Date of Birth": "December 13, 1982",
        "Dream Vacation City": "Las Vegas",
        "GPA": "1.9",
        "Arbitrary Data": "Under the couch"
        }
        ]
        
        
        
        var sortAscending = true;
        var table = d3.select('#page-wrap').append('table');
        var titles = d3.keys(data[0]);
        var headers = table.append('thead').append('tr')
        .selectAll('th')
        .data(titles).enter()
        .append('th')
        .text(function (d) {
        return d;
        })
        .on('click', function (d) {
        headers.attr('class', 'header');
        
        if (sortAscending) {
        rows.sort(function (a, b) { return b[d] < a[d]; }); sortAscending=false; this.className='aes' ; } else {
            rows.sort(function (a, b) { return b[d]> a[d]; });
            sortAscending = true;
            this.className = 'des';
            }
        
            });
        
            var rows = table.append('tbody').selectAll('tr')
            .data(data).enter()
            .append('tr');
            rows.selectAll('td')
            .data(function (d) {
            return titles.map(function (k) {
            return { 'value': d[k], 'name': k };
            });
            }).enter()
            .append('td')
            .attr('data-th', function (d) {
            return d.name;
            })
            .text(function (d) {
            return d.value;
            });

* {
            margin: 0;
            padding: 0;
        }

        body {
            font: 14px/1.4 Georgia, Serif;
        }

        #page-wrap {
            margin: 50px;
        }

        p {
            margin: 20px 0;
        }

        /* 
    Generic Styling, for Desktops/Laptops 
    */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        /* Zebra striping */
        tr:nth-of-type(odd) {
            background: #eee;
        }

        th {
            background: #333;
            color: white;
            font-weight: bold;
            cursor: s-resize;
            background-repeat: no-repeat;
            background-position: 3% center;
        }

        td,
        th {
            padding: 6px;
            border: 1px solid #ccc;
            text-align: left;
        }

        th.des:after {
            content: "\21E9";
        }

        th.aes:after {
            content: "\21E7";
        }

        /* 
    Max width before this PARTICULAR table gets nasty
    This query will take effect for any screen smaller than 760px
    and also iPads specifically.
    */
        @media only screen and (max-width: 760px),
        (min-device-width: 768px) and (max-device-width: 1024px) {

            /* Force table to not be like tables anymore */
            table,
            thead,
            tbody,
            th,
            td,
            tr {
                display: block;
            }

            /* Hide table headers (but not display: none;, for accessibility) */
            thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

            tr {
                border: 1px solid #ccc;
            }

            td {
                /* Behave  like a "row" */
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 50%;
            }

            td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }

            /*
        Label the data
        */
            td:before {
                content: attr(data-th) ": ";
                font-weight: bold;
                width: 6.5em;
                display: inline-block;
            }
        }

        /* Smartphones (portrait and landscape) ----------- */
        @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
            body {
                padding: 0;
                margin: 0;
                width: 320px;
            }
        }

        /* iPads (portrait and landscape) ----------- */
        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
            body {
                width: 495px;
            }
        }

    <div id="page-wrap"></div>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>