我有,我已经给每个<td>
s一些造型有背景颜色的表格,等他们也有不同数量的在他们的数据。具体来说,我有两个<td>
s彼此相邻,和一个在它里面的内容,使得它比其他的高。在Chrome中,短<td>
是相同的高度更高<td>
,用造型和一切。在Firefox / IE,短<td>
只是占用根据需要尽可能多的空间。我试着给<td>
高度:100%,但是这并没有真正做任何事情。我也试过具有高度的TD内一个div:100%,但没有做任何事情,无论是。
我怎样才能得到它的表现在所有三种浏览器一样的吗?我不一定需要它无论哪种方式,虽然这将是很好居然能控制它。我大多只是需要有同样的表现。
下面是最终的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;
}
避免将任何内联属性和使用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,这将挑选出浏览器的不一致性为您服务。