他のコンテンツが移動しないように動的コンテンツを配置する方法

Question

ユーザーが保存ボタンをクリックした後にメッセージを設定しようとしました。メッセージは 'レコードが正常に保存されました！' [保存]ボタンの横にあるか、表の右側に揃えます。

<tr> 
    <td align="center"> 
     <button type="button" name="save" id="save" onclick="pgSave();">Save</button> 
     <span id="msgSave"></span> 
    </td> 
</tr> 

Javascriptを：：

document.getElementById("msgSave").innerHTML = "Record has been saved successfully!"; 

現在のメッセージが表示されますが、[保存]ボタンを左にスライドさせますここに私のHTMLです。メッセージが表示されたら私のボタンが動かないようにしたい。それを修正する方法はありますか？私は標準の幅を設定すべきか、それとも私のHTMLで何かが間違っていますか？

Answer 1

問題は、内部のコンテンツが変更されたときにテーブルセルが調整されることです。これは、中心のコンテンツを使用する表のセルの性質です。

代わりにあなたが何か行うことができます：私はセルに幅を追加

<tr> 
    <td width="30%" align="center"> 
    <button type="button" name="save" id="save" onclick="pgSave();">Save</button> 
    </td> 
    <td width="30%"><span id="msgSave"></span></td> 
</tr> 

注 - これは彼らにそこにあるものは何でもコンテンツ同じレイアウトを維持する必要があります（多かれ少なかれ）。彼らはサイズを変更していないよう/意志の表のセルのように移動しても

より良いアプローチは、DIVののだろう。あなたが左にあなたのTRを揃える場合

Answer 2

、何のスライド

<tr> 
    <td align="left"> 
     <button type="button" name="save" id="save" onclick="pgSave();">Save</button> 
     <span id="msgSave"></span> 
    </td> 
</tr> 

は存在しません、あなたのレイアウトはあなたが左を揃えることを可能にするかどうかは知りませんが、それは解決

Answer 3

または内部です

<P> <スパンのid = 'msgSave' > < /スパン> <：同じtd要素は次のようにAPエレメントで囲まれたスパンを置きます/ p >

p要素にはデフォルトの区切りがあるので、