In below html, I’m facing an issue.
when I use bottom scrollbar to scroll from left to right then table go after navbar width as table is wide.
Is there any way to make this table responsive so it can adjust its size accordingly?
So far I tried bootstrap class ‘table-responsive’ and I also tried css ‘@media’ but it is not helping
Adding snap for visual reference
//CSS intact with this html
.table {
padding-top: 0;
}
.table-header {
border: 1px solid black !important;
padding: 10px;
width: 100px;
}
#th {
width: 30px;
}
.table-data {
border: 1px solid black;
padding: 10px;
"
}
.table-self {
border-collapse: collapse;
width: 100%;
}<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1 user-scalable=no, shrink-to-fit=no">
<meta content='#000000' name='theme-color' />
<title>Invoices</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css' crossorigin='anonymous'>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
<link rel="shortcut icon" href="{{ url_for('static', filename='img/inv.ico') }}" type="image/x-icon">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid ps-0">
<div class="container d-flex align-items-center">
<a class="navbar-brand" href="#">
<img src="{{ url_for('static', filename='img/brand.png') }}" alt="Priyanshu's Enterprises">
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<br>
<div id="content">
<div class="container-fluid">
<div class="invoices-header">
<h1>Invoices</h1>
<a href="#" id="export-btn">
<i class="fa-solid fa-file-excel fa-bounce excel-custom"></i>
</a>
</div>
<br>
<table class="table table-hover table-striped my-table ">
<thead>
<tr>
<th class="table-header"><input style="width: 30px;" type="text" placeholder="ID" onkeyup="filterTable(0, this.value)"></th>
<th class="table-header"><input style="width: 70px;" type="text" placeholder="Invoice No." onkeyup="filterTable(1, this.value)"></th>
<th class="table-header"><input style="width: 80px;" type="date" oninput="updateDate(this.value)"><span id="formatted-date"></span></th>
<th class="table-header"><input style="width: 60px;" type="text" placeholder="Name" onkeyup="filterTable(3, this.value)"></th>
<th class="table-header"><input style="width: 150px;" type="text" placeholder="Email" onkeyup="filterTable(4, this.value)"></th>
<th class="table-header"><input style="width: 60px;" type="text" placeholder="Phone number" onkeyup="filterTable(5, this.value)"></th>
<th class="table-header"><input style="width: 90px;" type="text" placeholder="Address" onkeyup="filterTable(6, this.value)"></th>
<th class="table-header"><input style="width: 265px;" type="text" placeholder="Items" onkeyup="filterTable(7, this.value)"></th>
<th class="table-header"><input style="width: 90px;" type="text" placeholder="Tax" onkeyup="filterTable(8, this.value)"></th>
<th class="table-header"><input style="width: 60px;" type="text" placeholder="Invoice Total" onkeyup="filterTable(9, this.value)"></th>
<th class="table-header"><input style="width: 60px;" type="text" placeholder="Logged by" onkeyup="filterTable(10, this.value)"></th>
<th class="table-header" style="width: 5px;">Invoice</th>
</tr>
</thead>
<tbody>
{% for row in rows %}
<tr>
<td class="table-data">{{ row[0] }}</td>
<td class="table-data">{{ row[1] }}</td>
<td class="table-data">{{ row[2] }}</td>
<td class="table-data">{{ row[3] }}</td>
<td class="table-data">{{ row[4] }}<br><a href="/send_email?id={{ row[0] }}"><i class="fa-sharp fa-solid fa-envelope fa-beat-fade email-custom"></i></a></td>
<td class="table-data">{{ row[5] }}<br><a href="https://wa.me/{{ row[5] }}" target="_blank"><i class="fa-brands fa-whatsapp fa-shake whatsapp-custom"></i></a></td>
<td class="table-data">{{ row[6] }}</td>
<td class="table-data">
<table class="table table-striped table-self">
<thead>
<tr>
<th class="table-header">Description</th>
<th class="table-header">Price</th>
<th class="table-header">Qty</th>
<th class="table-header">Final Price</th>
</tr>
</thead>
<tbody>
{% set items = js.loads(row[7]) %} {% for item in items %}
<tr>
<td class="table-data">{{ item.description }}</td>
<td class="table-data">{{ item.price }}</td>
<td class="table-data">{{ item.qty }}</td>
<td class="table-data">{{ item.final_price }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</td>
<td class="table-data">{{ row[8] }}</td>
<td class="table-data">{{ row[9] }}</td>
<td class="table-data">{{ row[10] }}</td>
<td class="table-data"><a href="{{ url_for('download', id=row[0]) }}">Download</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div id="footer">
<div class="back">
<a class="back-to-top" onclick="window.scroll(0,0)">BACK TO TOP</a>
</div>
<br>
<span class="copyright">
© Copyright <script>document.write(new Date().getFullYear())</script> | <a class='copy' href="http://domain.invalid/">Priyanshu</a>
</span>
</div>
</body>
</html>
3
Answers
I fixed it with below CSS, it is not 100%solution what I want but it is better
You have to wrap table in one div and add class name "table-responsive" like :
because you use bootstrap.
Add a new div with "table-responsive" class below the and close it before the tag like this: