在下面的HTML中，我遇到了一个问题。
当我使用底部滚动条从左到右滚动，然后表去后导航栏宽度作为表宽。
有没有什么方法可以让这个表有响应性，以便它可以相应地调整它的大小？
到目前为止，我尝试了bootstrap类'table-responsive'，我也尝试了css '@media'，但它没有帮助
为可视参考x1c 0d1x添加捕捉
//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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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条答案
按热度按时间nukf8bse1#
你必须将table Package 在一个div中，并添加类名“table-responsive”，如：
因为你用的是bootstrap
bbuxkriu2#
在下面添加一个新的div，并在标签之前关闭它，如下所示：
bmvo0sr53#
我用下面的CSS修复了它，它不是我想要的100%解决方案，但它更好