在我的 Html 中有一个标题、两个按钮和两个表格。 当网页首次启动时，会显示与“第一个”按钮关联的表格。不显示与第二个按钮关联的表格。
单击“第二个”按钮时，将显示与第二个按钮关联的表格，而不会显示第一个表格。
代码在 IE11 中运行良好，表格在 IE11 中按要求居中；但表格不会在 chrome/firefox 中居中。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>All Stock Data</title>
<link rel="stylesheet" href="stock.css" type="text/css">
<script type="text/javascript" src="stock.js" ></script>
</head>
<body>
<h1>Stock Data</h1>
<div class="mytoggle">
<button onclick="toggleDisplay('first')" id="button_first">First</button>
<button onclick="toggleDisplay('second')" id="button_second">Second</button>
</div>
<table id="first">
<tr>
<th>Name</th>
<th>Color</th>
<th>Shape</th>
</tr>
<tr>
<td>O1</td>
<td>Blue</td>
<td>Square</td>
</tr>
<tr>
<td>L1</td>
<td>Brown</td>
<td>Circle</td>
</tr>
</table>
<table id="second">
<tr>
<th>Name</th>
<th>Color</th>
<th>Shape</th>
</tr>
<tr>
<td>H2</td>
<td>White</td>
<td>Round</td>
</tr>
<tr>
<td>M2</td>
<td>Gray</td>
<td>Square</td>
</tr>
</table>
</body>
</html>
CSS:
table {
border-collapse: collapse;
margin: auto;
}
table#first {
display: block;
}
table#second {
display: none;
}
Javascript:
function toggleDisplay(myTableId)
{
if(myTableId == "first"){
document.getElementById('first').style.display = "block";
document.getElementById('second').style.display = "none";
/*background*/
document.getElementById('button_first').style.background = "blue";
document.getElementById('button_second').style.background = "gray";
}
if(myTableId == "second"){
document.getElementById('first').style.display = "none";
document.getElementById('second').style.display = "block";
/*background*/
document.getElementById('button_first').style.background = "gray";
document.getElementById('button_second').style.background = "blue";
}
}
最佳答案
CSS(替换现有的):
table#first {
display: table;
}
脚本:
function toggleDisplay(myTableId)
{
if(myTableId == "first"){
document.getElementById('first').style.display = "table";
document.getElementById('second').style.display = "none";
}
if(myTableId == "second"){
document.getElementById('first').style.display = "none";
document.getElementById('second').style.display = "table";
}
}
简而言之，无论你在哪里设置一个<table>显示为 block你被冲洗干净了。 <table>不是 block 。所以使用 display:table .更多信息 going back to CSS 2 .
关于css 表格在 IE11 中居中，但在 Chrome/Firefox 中不居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37402044/