Fatal编程技术网

Javascript 表未扩展到100%

javascript html css

Javascript 表未扩展到100%,javascript,html,css,html-table,width,Javascript,Html,Css,Html Table,Width,当用户单击div时，我正在div中显示一个HTML表。但是，该表的宽度并不像我在CSS中设置的那样为100%。有人能帮忙吗？提前谢谢 这是一个砰的一声 .集装箱{ 填充：10px； } boxscore先生{ 边框：实心1px； 填充物：5px； 利润率：10px； 宽度：90%； 光标：指针； } .time_字段{ 文本对齐：居中； } .分数{ 保证金：自动； 文本对齐：居中； } .分数img，h1{ 显示：内联块； 保证金：自动； 垂直对齐：中间对齐； } h1{ 字体大小：100

当用户单击div时，我正在div中显示一个HTML表。但是，该表的宽度并不像我在CSS中设置的那样为100%。有人能帮忙吗？提前谢谢

这是一个砰的一声 


.集装箱{
填充：10px；
}
boxscore先生{
边框：实心1px；
填充物：5px；
利润率：10px；
宽度：90%；
光标：指针；
}
.time_字段{
文本对齐：居中；
}
.分数{
保证金：自动；
文本对齐：居中；
}
.分数img，h1{
显示：内联块；
保证金：自动；
垂直对齐：中间对齐；
}
h1{
字体大小：100px；
}
#球员状态稳定{
宽度：100%；
利润率：10px；
显示：无；
}
下午7:05
@PNC公园
5.
-
2.
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
玩家
R
打点
1B
2B
3B
人力资源
薪水
价值
var t=0；
函数切换表（）{
如果（t==0）{
document.getElementById（“playerStatsTable”）.style.display=“block”；
t=1；
}
否则{
document.getElementById（“playerStatsTable”）.style.display=“无”；
t=0；
}
}
您正在显示 
<!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>

document.getElementById("playerStatsTable").style.display="table";

#playerStatsTable {
        width: 100%;
        margin: auto;
        display: none;
        overflow: hidden;
}
th, td {
 padding: 4px;
  border: 1px solid black;
}