在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，它可以为你排除浏览器的不一致性。