在firefox/IE/Chrome中製作td相同

Question

所以，我已經有了一個表格，我已經給出了每個<td>的某些樣式以具有背景顏色等。它們也有不同數量的數據他們。具體來說，我有兩個相鄰的<td>，其中一個內容使其高於另一個。在Chrome中，較短的<td>與高度較高的<td>一樣高，具有造型和一切。在Firefox/IE中，較短的<td>只需佔用儘可能多的空間。我試過<td>身高：100％，但那並沒有真正做到。我也嘗試過在高度：100％的td裏面有一個div，但是也沒有做任何事情。

我怎樣才能讓它在所有三種瀏覽器中表現相同？我不一定非要這樣做，儘管實際上能夠控制它是很好的。我大多隻是需要它表現一樣。

下面是最終的html。這可能很難理解，因爲那裏有很多淘汰賽的東西。

<div class="container"> 
    <div class="inner-container"> 
<table> 
     <tbody><tr><td style="text-align: right"><input type="button" id="manageSaveButtonTop" class="journal-button manage-save-button manage-save-button-top" value="Save"></td></tr> 
     <tr> 
      <td id="template" class="outer-div"> 
        <h6>Templates</h6> 
        <ol class="journalTree sortable template manageJournal ui-sortable" > 
<li class="group mine template"> 
    <div> 
     <span class="itemText" data-bind="textToTextbox: Description">New Group</span> 
</li> 

<li class="no-nest mine template"> 
    <div> 
     <span class="itemText" data-bind="textToTextbox: Description">New Objective</span> 
</li> 

        </ol> 
       <!--</div>--> 
      </td> 
      <td id="myJournal" class="outer-div droppable ui-droppable"> 
       <!--<div id="myJournal" class="outer-div droppable ui-droppable">--> 
        <h6>My Journal</h6> 
        <ol class="journalTree sortable myJournal manageJournal ui-sortable"> 
<li class="group mine "> 
    <div> 
     <span class="itemText" data-bind="textToTextbox: Description">New Group</span> 
</li> 

<li class="no-nest deleted "> 
    <div> 
     <span class="itemText" data-bind="textToTextbox: Description">Blank Objective</span> 
</li> 

<li class="group deleted "> 
    <div> 
     <span class="itemText" data-bind="textToTextbox: Description">Deleting Group</span> 
    <input type="text" style="display:none" class="itemTextBox"></div> 
     <ol > 
<li class="no-nest deleted "> 
    <div> 
     <span class="itemText" data-bind="textToTextbox: Description">Test Deleting</span> 
</li> 
     </ol> 
</li> 

<li class="group deleted "> 
    <div> 
     <span class="itemText" data-bind="textToTextbox: Description">New Group</span> 
    <input type="text" style="display:none" class="itemTextBox"></div> 
     <ol> 
<li class="no-nest deleted "> 
    <div> 
     <span class="itemText" data-bind="textToTextbox: Description">New Objective</span> 
</li> 

     </ol> 
</li> 

        </ol> 
       <!--</div>--> 
      </td> 
     </tr> 
     <tr><td style="text-align: right"><input type="button" id="manageSaveButtonBottom" class="journal-button manage-save-button bottom" value="Save"></td></tr> 
    </tbody></table></div></div> 

我不能高度設置爲特定的高度，因爲右表的高度動態變化（通過添加更多的東西出來）。以下是相關的CSS：

#myJournal 
{ 
    border: 1px solid black; 
    display: inline-block; 
    vertical-align: top; 
    background-color: #dde5e4; 
    width: 650px; 
    height: 100%; 
    border-radius: 25px; 
    -moz-border-radius: 25px; 
} 


#template 
{ 
    border: 1px solid black; 
    display: inline-block; 
    vertical-align: top; 
    background-color: #dde5e4; 
    width: 500px; 
    height: 100%; 
    margin-right: 100px; 
    border-radius: 25px; 
    -moz-border-radius: 25px; 
} 

Answer 1

避免設置任何內聯屬性並改用CSS來改變表格的樣式。嘗試使用CSS設置單元格寬度。你可以做這樣的事情（理想情況下，你想在一個單獨的文件你的CSS，但只是爲了說明）：

<style type="text/css"> 
    table#myTable td { 
     height: 200px; 
     width: 200px; 
    } 
</style> 

<table id="myTable"> 
    <tbody> 
     <tr> 
      <td>My data</td> 
     </tr> 
    </tbody> 
</table> 

如果你想不同的大小，創建單獨的類並把它們應用到你的細胞：

<style type="text/css"> 
    td.small-cell { 
     width: 100px; 
    } 
</style> 

<table id="myTable"> 
    <tbody> 
     <tr> 
      <td class="small-cell">My data</td> 
     </tr> 
    </tbody> 
</table> 

最後，如果你正在開始一個項目，你可能想節省一些時間，並使用一個CSS框架，比如Twitter Bootstrap，它可以爲你排除瀏覽器的不一致性。