Question

我有一张桌子，我给了每个<td>一些样式以获得背景颜色等。它们中也有不同数量的数据。具体来说，我有两个<td>彼此相邻，其中一个有内容，使其高于另一个。在Chrome中，较短的<td>与较高的<td>的高度相同，具有样式和所有内容。在Firefox / IE中，较短的<td>只占用了所需的空间。我试过给<td>身高：100％，但那并没有真正做任何事情。我也尝试在td中有一个高度为100％的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;
}

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，这将为您解决浏览器不一致问题。

在Firefox / IE / Chrome中使td相同

1 个答案: