表示：テーブル要素のインラインブロックがブラウザ間で矛盾しています

Question

私はコメントフィールドを持っています。

私は4行までサポートされています。

すべての4行は空白にすることができるため、細かいフォームの一部です。

私は以下のようにコードを持っている：

$('#addcomment').click(function(){ 
 
     $('.hiddenComment').css("display", "inline-block"); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr> 
 
    \t \t \t <td class="formtitle">Comments</td> 
 
    \t \t \t <td class="formfield"><input id="inputdesc" name="comments" type="text" size="70" maxlength="60" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span><img id="addcomment" style="vertical-align: text-bottom" src="/files/icons/label.png" /></td> 
 
    \t \t </tr> 
 
    \t \t <tr class="hiddenComment" id="comment2" style="display: none"> 
 
    \t \t \t <td class="formtitle">Comments 2</td> 
 
    \t \t \t <td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td> 
 
    \t \t </tr> 
 
    \t \t <tr class="hiddenComment" id="comment3" style="display: none"> 
 
    \t \t \t <td class="formtitle">Comments 3</td> 
 
    \t \t \t <td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td> 
 
    \t \t </tr> 
 
    \t \t <tr class="hiddenComment" id="comment4" style="display: none"> 
 
    \t \t \t <td class="formtitle">Comments 4</td> 
 
    \t \t \t <td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td> 
 
    \t \t </tr>

ボタンがクリックされたときに、それは余分な行が表示されます。

それは驚くべきことに...

しかしはクロームで動作するようには思えない..ですIEで動作します。

誰もがこのようにテーブルを表示する理由はありますか？

おかげ

Answer 1

あなたは私も幅=「120」は、列の幅が、非常に必要ではない問題を解決するために追加'.show()'と'.hide()'

jqueryの関数を使用することができます。

$('.formtitle, .formfield').hide(); 
 
$('.base, .hiddenComment').show(); 
 

 
\t $('#addcomment').click(function(){ 
 
     $('.formtitle, .formfield').show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
\t \t \t <tr> 
 
    \t \t \t <td class="formtitle base" width="120">Comments</td> 
 
    \t \t \t <td class="formfield base"><input id="inputdesc" name="comments" type="text" size="70" maxlength="60" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span><img id="addcomment" style="vertical-align: text-bottom" src="/files/icons/label.png" /></td> 
 
    \t \t </tr> 
 
    \t \t <tr class="hiddenComment" id="comment2" style="display: none"> 
 
    \t \t \t <td class="formtitle">Comments 2</td> 
 
    \t \t \t <td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td> 
 
    \t \t </tr> 
 
    \t \t <tr class="hiddenComment" id="comment3" style="display: none"> 
 
    \t \t \t <td class="formtitle">Comments 3</td> 
 
    \t \t \t <td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td> 
 
    \t \t </tr> 
 
    \t \t <tr class="hiddenComment" id="comment4" style="display: none"> 
 
    \t \t \t <td class="formtitle">Comments 4</td> 
 
    \t \t \t <td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td> 
 
    \t \t </tr> 
 
\t \t \t 
 
</table> \t

---

解決方法2：

、あなたがショーのためにこのコードを試してみて、クリック時に非表示にすることができます：

<script> 
$('.formtitle, .formfield').hide(); 
$('.base, .hiddenComment').show(); 

var view=false; 
$('#addcomment').click(function(){ 
    view = !view; 
    if(view){ 
     $('.formtitle, .formfield').show(); 
    } 
    else{ 
     $('.formtitle, .formfield').hide(); 
     $('.base, .hiddenComment').show(); 
    } 
}); 
</script> 

---

ソリューション3 ：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <table> 
       <tr> 
        <td class="formtitle" width="120">Comments</td> 
        <td class="formfield"><input id="inputdesc" name="comments" type="text" size="70" maxlength="60" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span><img id="addcomment" style="vertical-align: text-bottom" src="/files/icons/label.png" /></td> 
       </tr> 
       <tr class="hiddenComment" id="comment2" style="display: none"> 
        <td class="formtitle">Comments 2</td> 
        <td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td> 
       </tr> 
       <tr class="hiddenComment" id="comment3" style="display: none"> 
        <td class="formtitle">Comments 3</td> 
        <td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td> 
       </tr> 
       <tr class="hiddenComment" id="comment4" style="display: none"> 
        <td class="formtitle">Comments 4</td> 
        <td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td> 
       </tr> 

    </table>  

<script> 
$('.hiddenComment').show(); 
$('.hiddenComment > td').hide(); 

     var view=false; 
     $('#addcomment').click(function(){ 
      view = !view; 

      if(view){ 
       $('.hiddenComment > td').show(); 
      } 
      else{ 
       $('.hiddenComment > td').hide(); 
      } 
     }); 
</script>