Table 没有展开到 100%
Table does not expand to 100%
当用户点击 div 时，我在 div 中显示 HTML table。然而 table 并不是我在 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>
您正在显示 table，所以不要将显示设置为阻塞，将其设置为 table:
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>
我查看了你的 plunker 并检查了 table 元素，它在填充后是其父元素的 100% 宽度。
如果您想让列在 table 的整个宽度上均匀分布，请向适当的选择器添加一点 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;
}
希望这对您有所帮助...
当用户点击 div 时，我在 div 中显示 HTML table。然而 table 并不是我在 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>
您正在显示 table，所以不要将显示设置为阻塞，将其设置为 table:
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>
我查看了你的 plunker 并检查了 table 元素，它在填充后是其父元素的 100% 宽度。
如果您想让列在 table 的整个宽度上均匀分布，请向适当的选择器添加一点 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;
}
希望这对您有所帮助...