时间戳

首页 > 解决方案 > 我该怎么做才能使这张表进一步扩展？

javascript - 我该怎么做才能使这张表进一步扩展？

问题描述

https://joylandcreative.com/barchpadness-notworking-2/

需要整个表格可见，但它只能与 .w3-bar 一样长，我似乎无法更改其宽度。

<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>```

标签： javascripthtmlcssiframe

解决方案

在代码中

<div id="primary" class="col-md-8 mb-xs-24 no-sidebar">

更改类 col-md-12在此处输入图像描述

推荐阅读