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

回答

相關問題