应用错误收集

css表以IE11为中心，但不在Chrome / Firefox中

时间：2016-05-23 23:21:12

标签： css

在我的Html中有一个标题，两个按钮和两个表。当首次启动网页时，首先与“＆＃39;按钮显示。与第二个按钮关联的表格不会显示。

当＆＃39;秒＆＃39;单击按钮，将显示与第二个按钮关联的表，并且不显示第一个表。

代码在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";
  }

}

2 个答案:

答案 0 :(得分：1)

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>不是阻止。所以使用display:table。更多信息going back to CSS 2。

答案 1 :(得分：0)

最后，找到了桌子不居中的原因。到目前为止，我在本地调出html页面（右键单击文件并在浏览器中选择打开），而无需通过Web服务器。一旦我开始通过Web服务器访问html文件，表就会根据需要开始居中。其他功能，如备用行突出显示也开始在IE中工作（我的情况也没有触发）。