使TD在Firefox / IE / Chrome的相同

问题描述 投票:0回答:1

我有,我已经给每个<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;
}
html html-table cross-browser
1个回答
0
投票

避免将任何内联属性和使用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,这将挑选出浏览器的不一致性为您服务。

© www.soinside.com 2019 - 2024. All rights reserved.