0

背景色などのスタイリングを各 s に与えたテーブルがあります<td>。また、それらにはさまざまな量のデータが含まれています。具体的には、2 つ<td>の が隣り合っており、一方には他方よりも背が高くなるコンテンツが含まれています。Chrome では、 short<td>は taller と同じ高さ<td>で、スタイリングとすべてが含まれています。Firefox/IE では、短い方<td>が必要なだけスペースを占有します。高さを 100% にしてみまし<td>たが、実際には何もしませんでした。高さ: 100% の td 内に div を入れてみましたが、それも何もしませんでした。

3 つのブラウザすべてで同じように動作させるにはどうすればよいですか? 実際に制御できるといいのですが、必ずしもどちらかである必要はありません。ほとんどの場合、同じように動作する必要があります。

これが最終的な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>

最後に、プロジェクトを開始する場合は、時間を節約して、ブラウザの不一致を整理してくれるTwitter Bootstrapなどの CSS フレームワークを使用することをお勧めします。

于 2012-06-08T19:17:38.060 に答える