0

我有一个表格，我给每个<td>s 一些样式以具有背景颜色等。它们中也有不同数量的数据。具体来说，我有两个<td>相邻的 s，其中一个包含使其比另一个更高的内容。在 Chrome 中，较短<td>的高度与较高的高度相同<td>，具有样式和所有内容。在 Firefox/IE 中，较短的<td>只是根据需要占用尽可能多的空间。我试过给出<td>高度：100%，但这并没有真正做任何事情。我还尝试在 td 内设置一个高度为 100% 的 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>

​</p>

我无法将高度设置为特定高度，因为右表的高度会动态变化（通过向其添加更多内容）。这是相关的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;
}
4

1 回答 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，它会为您解决浏览器的不一致问题。

于 2012-06-08T19:17:38.060 回答