https://joylandcreative.com/barchpadness-notworking-2/
Нужно, чтобы полная таблица была видимой, но она может быть такой же длины, как и .w3-бар, который, как мне кажется, не может изменить ширину из.
<html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-bar"> <button class="w3-bar-item w3-button" onclick="openCity('Leaderboard')">Leaderboard</button> <button class="w3-bar-item w3-button" onclick="openCity('Bracket')">Bracket</button> <button class="w3-bar-item w3-button" onclick="openCity('Tracker')">Tracker</button> <button class="w3-bar-item w3-button" onclick="openCity('Upsets')">Upsets</button> </div> <div id="Leaderboard" class="w3-container city"> <iframe style="width:90%;height:400px;margin:auto;" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR2Y8iROpujT5OdXpQgwl-eSywABSce4eMsWuJYZht1gqfBHTijjFSzEj24dxYf1cYM5dKPSIB7KIrg/pubhtml?gid=178422594&single=true&widget=false&headers=false&chrome=false"></iframe> </div> <div id="Bracket" class="w3-container city" style="display:none"> <iframe style="width:1114px;height:782px;" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR2Y8iROpujT5OdXpQgwl-eSywABSce4eMsWuJYZht1gqfBHTijjFSzEj24dxYf1cYM5dKPSIB7KIrg/pubhtml?gid=15189697&range=B4:S70&single=true&widget=false&headers=false&chrome=false"></iframe> </div> <div id="Tracker" class="w3-container city" style="display:none"> <iframe style="width:1088px;height:605px;" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR2Y8iROpujT5OdXpQgwl-eSywABSce4eMsWuJYZht1gqfBHTijjFSzEj24dxYf1cYM5dKPSIB7KIrg/pubhtml?gid=293817679&single=true&widget=false&headers=false&chrome=false"></iframe> </div> <div id="Upsets" class="w3-container city" style="display:none"> <iframe style="width:1046px;height:705px;" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR2Y8iROpujT5OdXpQgwl-eSywABSce4eMsWuJYZht1gqfBHTijjFSzEj24dxYf1cYM5dKPSIB7KIrg/pubhtml?gid=237690339&single=true&widget=false&headers=false&chrome=false"></iframe> </div> <script> function openCity(cityName) { var i; var x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } document.getElementById(cityName).style.display = "block"; } </script> </body> </html>```
Это css приводит к тому, что таблица не будет иметь такую же ширину, как .w3-bar:
@media (min-width: 992px) .col-md-8 { width: 66.66666667%; }
Это определено в bootstrap.css:1943
bootstrap.css:1943
в коде
<div id="primary" class="col-md-8 mb-xs-24 no-sidebar">
изменить класс col-md-12