I've spent the last 2 hours playing around with CSS, using width:100% and width:100vw, but nothing seems to be working.
Currently, the navigation bar fits perfectly across the screen on desktop browsers, so there doesn't seem to be an issue there. However, the page contains a dynamic table that expands in width as new columns are added.
Unfortunately, the navigation bar does not stretch to match the full width of the table. As you scroll horizontally across the page, the table grows wider while the navigation bar stays narrow, creating a mismatch between the two elements.
The table-container class is currently commented out, but even when uncommented, it doesn't resolve the issue.
Here is my existing code. I would greatly appreciate any help you can provide.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Flask Web Form</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
zoom: 175%;
}
.topnav {
overflow: hidden;
background-color: #333;
display: flex;
width: 100vw;
position: sticky;
top: 0;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #AAC939;
color: white;
}
.form-container {
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-right: 5px;
}
/* .table-container {
width: 100%;
} */
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>;
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c4c9c9d2d5d2d4c7d6e69288958897">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"></head>
<!-- BODY -->
<body style="background-color: white;">
<div class="topnav">
<a href="{{ url_for('index') }}">Section 1</a>
<a class="active" href="{{ url_for('show_table') }}">Section 2</a>
<a href="{{ url_for('admin') }}">Section 3</a>
</div>
<header>
<title>Form Data</title>
</header>
<div class="table-container">
<table border="1" class="table table-striped" style="max-width:100%; white-space:nowrap">
<thead>
<tr>
{% for column_name in column_names %}
<th>{{ column_name|replace('_', ' ') }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in rows %}
<tr>
{% for item in row %}
<td>{{ item|replace('_', ' ') }}</td>
{% endfor %}
<tr>
{% endfor %}
</tbody>
</table>
</div>
</body>
</html>