当用户点击div时，我在div中显示HTML表格。然而，表格不是像我在CSS中设置的100％宽度。有人可以帮忙吗？提前谢谢。
继承人 https://plnkr.co/edit/wxXzEsLV0Z3a4AqRr5zB?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style type="text/css">
.container {
padding: 10px;
}
.boxscore {
border: solid 1px;
padding: 5px;
margin: 10px;
width: 90%;
cursor: pointer;
}
.time_field {
text-align: center;
}
.scores {
margin: auto;
text-align: center;
}
.scores img, h1{
display: inline-block;
margin: auto;
vertical-align: middle;
}
h1 {
font-size: 100px;
}
#playerStatsTable {
width: 100%;
margin: 10px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="boxscore" onclick="toggleTable()">
<div class="time_field">
<label for="time">7:05 PM</label>
<label for="field">@PNC Park</label>
</div>
<div class="scores">
<img src="sd.png">
<h1>5</h1>
<h1>-</h1>
<h1>2</h1>
<img src="pit.png">
</div>
<div id="playerstats"></div>
<table id="playerStatsTable">
<tr>
<th>Player</th>
<th>R</th>
<th>RBI</th>
<th>1B</th>
<th>2B</th>
<th>3B</th>
<th>HR</th>
<th>Salary</th>
<th>Value</th>
<th>Player</th>
<th>R</th>
<th>RBI</th>
<th>1B</th>
<th>2B</th>
<th>3B</th>
<th>HR</th>
<th>Salary</th>
<th>Value</th>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var t = 0;
function toggleTable() {
if (t == 0) {
document.getElementById("playerStatsTable").style.display="block";
t = 1;
}
else {
document.getElementById("playerStatsTable").style.display="none";
t = 0;
}
}
</script>
</body>
</html>
答案 0 :(得分：2)
我查看了你的plunker并检查了table元素，填充后它的父元素宽度为100％。
如果您尝试让列在表的整个宽度上均匀分布，请向相应的选择器添加一些css：https://plnkr.co/edit/xvtd9zh9bphy47RYxEQg?p=preview
#playerStatsTable {
width: 100%;
margin: auto;
display: none;
overflow: hidden;
}
th, td {
padding: 4px;
border: 1px solid black;
}
希望这会有所帮助......
答案 1 :(得分：0)
您正在显示表格，因此请勿将显示设置为阻止，将其设置为表格：
document.getElementById("playerStatsTable").style.display="table";
var t = 0;
function toggleTable() {
if (t == 0) {
document.getElementById("playerStatsTable").style.display = "table";
t = 1;
} else {
document.getElementById("playerStatsTable").style.display = "none";
t = 0;
}
}/* Styles go here */
.container {
padding: 10px;
}
.boxscore {
border: solid 1px;
padding: 5px;
margin: 10px;
width: 90%;
cursor: pointer;
}
.time_field {
text-align: center;
}
.scores {
margin: auto;
text-align: center;
}
.scores img,
h1 {
display: inline-block;
margin: auto;
vertical-align: middle;
}
h1 {
font-size: 100px;
}
#playerStatsTable {
width: 100%;
margin: 10px;
display: none;
}<div class="container">
<div class="boxscore" onclick="toggleTable()">
<div class="time_field">
<label for="time">7:05 PM</label>
<label for="field">@PNC Park</label>
</div>
<div class="scores">
<img src="sd.png">
<h1>5</h1>
<h1>-</h1>
<h1>2</h1>
<img src="pit.png">
</div>
<div id="playerstats"></div>
<table id="playerStatsTable">
<tr>
<th>Player</th>
<th>R</th>
<th>RBI</th>
<th>1B</th>
<th>2B</th>
<th>3B</th>
<th>HR</th>
<th>Salary</th>
<th>Value</th>
<th>Player</th>
<th>R</th>
<th>RBI</th>
<th>1B</th>
<th>2B</th>
<th>3B</th>
<th>HR</th>
<th>Salary</th>
<th>Value</th>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
<tr>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
<td>Player</td>
<td>R</td>
<td>RBI</td>
<td>1B</td>
<td>2B</td>
<td>3B</td>
<td>HR</td>
<td>Salary</td>
<td>Value</td>
</tr>
</table>
</div>
</div>