CSS显示：内联/无表适用于Firefox，但不适用于Chrome或Safari

我正在研究一个快速而肮脏的应用程序，它涉及在外部表中水平显示多个单列表。CSS显示：内联/无表适用于Firefox，但不适用于Chrome或Safari

|-------------------------------------------| 
|    outer table     | 
|-------------------------------------------| 
| --------- --------- --------- | 
| | table 1| |table 2| |table 3| | 
| --------- --------- --------- | 
| | row 1 | | row 1 | | row 1 | | 
| --------- --------- --------- | 
| ...         | 
| --------- --------- --------- | 
| | row n | | row n | | row n | | 
| --------- --------- --------- | 
|           | 
|-------------------------------------------| 

     --------- ---------  
     |SHOW #2| |SHOW #3| 
     --------- ---------

我意识到这可能使用CSS不表来完成，但我不擅长不够，这并不需要是优雅。在开始时，只显示第一个表格。点击按钮将＃2和＃3的“none”切换到“inline”（我也试过“block”）。在这个例子中，我将＃2的样式设置在表格周围的DIV中，并在表格周围的TD中设置＃3。这两种方法都适用于Firefox 22.0，但不适用于Chrome 27.0或Safari 5.0（全部适用于Mac）。有没有使用表格的解决方案？或者，如果你想设计样式表，那也可以:-)

<html> 
<body> 

<table id = "main" border=0 cellspacing=20> 

    <tr> 
     <td> 
      <table id = "tbl1" border=0> 
       <tr><td> table #1, row #1 </td></tr> 
       <tr><td> table #1, row #2 </td></tr> 
      </table> 
     </td> 

     <td> 
      <!-- Hide the table with a hidden DIV --> 

      <div id = "tbl2" style="display:none"> 
       <table border=0> 
       <tr><td> table #2, row #1 </td></tr> 
       <tr><td> table #2, row #2 </td></tr> 
      </table> 
      </div> 
     </td> 

     <!-- Hide the table with a hidden TD --> 

     <td id = "tbl3" style="display:none"> 
      <table border=0> 
      <tr><td> table #3, row #1 </td></tr> 
      <tr><td> table #3, row #2 </td></tr> 
     </table> 
     </td> 
    </tr> 
</table> 

<br> 

<input type=button value ='show table #2' onclick='document.getElementById("tbl2").style="display:inline"'> 
<input type=button value ='show table #3' onclick='document.getElementById("tbl3").style="display:inline"'> 
<br> 
<br> 
<input type=button value ='hide table #2' onclick='document.getElementById("tbl2").style="display:none"'> 
<input type=button value ='hide table #3' onclick='document.getElementById("tbl3").style="display:none"'> 

</body> 
</html>

来源

2013-07-17 LKramer

'style =“display：table-cell;”'working在这里的所有浏览器（Windows）。 –

作了一个简单的例子http://jsfiddle.net/insanebits/beCML/ – insanebits

这里的工作example。在创建它时，我不知道你不想使用jQuery，但我强烈建议你改变主意，因为所有你需要做的就是将它添加到你的html中，最好是在关闭</body>标记之前：

<script src="http://code.jquery.com/jquery-1.7.2.min.js"> 
$(document).ready(function() { 
    $('input').on("click", function() { 
     var inputValue = $(this).val(); 
     var index = inputValue.indexOf("#") 
     var divId = "#tbl" + inputValue.substr(index+1); 
     $(divId).toggle(); 
    }); 
}); 
</script>

我也改变了HTML一下：我使用的每个表的1个输入：“显示或隐藏”在1按钮。但是，您可以使用2个按钮：只需更改jQuery并相应地调用hide（）或show（）。如果你真的不想使用jQuery，你可以将我的示例转换为纯JavaScript，但似乎这需要更多的代码:)

来源

2013-07-17 14:54:22

嗯。我没有意识到你可以直接链接到code.jQuery.com。这使得应用程序的管理更容易。所以我会采取你的建议，并采取jQuery路线。感谢精辟的代码！ – LKramer

@LKramer更好地使用Google CDN上托管的那个，而不是来自jQuery站点。链接示例为'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'请参阅https://developers.google.com/speed/libraries/devguide#jquery – 2013-07-17 21:15:19

@LKramer很高兴它为你工作:) –

你可以在这里使用TABS并且仍然有你的table-Element。试试这个：http://jqueryui.com/tabs/ 它能够帮助你解决问题

来源

2013-07-17 13:59:28 LittleHoopoe

谢谢，保罗，但我需要所有的表格一次显示。（我也指出这个应用程序清除jQuery。） – LKramer

CSS显示：内联/无表适用于Firefox，但不适用于Chrome或Safari

回答

相关问题