ディスプレースメント​​と<tr>

Question

このはは解決しなければならない超簡単です。私はそれが好きなように動作していない次のコードを持っています。

1 2  BUTTON 
3 4 

が、私が得るすべては、3行目のようにボタンとほぼ同じ処分である：目的は「1 2 3 4表」の右にあるボタンで、このような何かを持っていることです。私は何が欠けていますか？

<tr> 
 
    <td> 
 
     <tr> 
 
      <td>1 </td> 
 
      <td>2 </td> 
 
     </tr> 
 
     <tr> 
 
      <td>3 </td> 
 
      <td>4 </td> 
 
     </tr> 
 
    </td> 
 
    <td> 
 
     <div class="but"> 
 
      <input type="button" class="button" value="BUTTON" /> 
 
     </div> 
 
    </td> 
 
</tr>

Answer 1

あなたは、内部テーブルを持っているしたい場合は、それが<table>タグの独自のセットを必要とします：

<table> 
    <tr> 
     <td> 
      <table> 
       <tr> 
        <td>1 </td> 
        <td>2 </td> 
       </tr> 
       <tr> 
        <td>3 </td> 
        <td>4 </td> 
       </tr> 
      </table> 
     </td> 
     <td> 
      <div class="but"> 
       <input type="button" class="button" value="BUTTON" /> 
      </div> 
     </td> 
    </tr> 
</table> 

そうでない場合あなたの「内なる」trは実際には2番目のものとして扱われていますあなたの外のテーブルの3番目の行は、変位を引き起こします。ボタンを含むtdは、の後に新しい行に表示され、の番号の行が表示されます。その結果、開始タグが<tr>であり、予期しない一部の<td>/</td>タグが欠落しています。ここで私は何を意味するかをお見せするために（何らかの理由で問題に示されていない<table>/</table>外側のタグを含む）、元のマークアップの再インデントと「固定」です：<tr>と<td>が持っている

<table> 
    <tr> 
     <td> 
    <tr> 
     <td>1 </td> 
     <td>2 </td> 
    </tr> 
    <tr> 
     <td>3 </td> 
     <td>4 </td> 
    </tr> 
    <tr> 
     <td> 
      <div class="but"> 
       <input type="button" class="button" value="BUTTON" /> 
      </div> 
     </td> 
    </tr> 
</table> 

注意オプションの終了タグは、最初のtrとtdに終了タグがない場合でも、上記のマークアップが完全に有効であることを意味し、元のマークアップがそのまま処理される理由です。

Answer 2

あなたは最初のテーブルの行にあなたのボタンを移動する必要があります。あなたのHTMLは有効ではありません。<tr>を<td>に入れることはできません。 the specificationから：

Contexts in which this element can be used：thead要素の子として
。
tbody要素の子として。 tfoot要素の子として。 table要素の子として、caption,colgroup、およびthead要素の後にありますが、要素の子要素であるtbody要素がない場合に限ります。

私のスニペットをチェックアウト：

td { 
 
    padding: 5px 20px; 
 
}

<table> 
 
    <tr> 
 
     <td>1 </td> 
 
     <td>2 </td> 
 
     <td> 
 
      <div class="but"> 
 
       <input type="button" class="button" value="BUTTON" /> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>3 </td> 
 
     <td>4 </td> 
 
     <td></td> 
 
    </tr> 
 
</table>

Answer 3

1個の<tr>タグ内にeveythingが含まれています。 2つの別々の<tr>タグ、つまり2行とボタンが<table>タグの外側にある必要があります。

はその後CSSあなたはinline-blockにテーブルとボタンの両方のdisplayを設定し、CSSのpositionプロパティを使用する必要がありますを使用して、あなたは、目的の位置にボタンを配置することができます。

スペースをテーブルの2つの列の間に入れたい場合は、 を使用して、テーブルの2つの列の間にスペースを追加することができます。

ボタンの左側にいくつかのpaddingを追加し、テーブルとボタンの間にいくつかのスペースを追加します。

.but{ 
 
    display: inline-block; 
 
    position: relative; 
 
    top: -30px; 
 
    padding-left: 40px; 
 
} 
 

 
table{ 
 
    display: inline-block; 
 
}

<table> 
 
<tr> 
 
<td>1</td> 
 
    <td>&emsp;&emsp;</td> 
 
<td>2</td> 
 
</tr> 
 

 
<tr> 
 
    <td>3</td> 
 
    <td>&emsp;&emsp;</td> 
 
<td>4</td> 
 
</tr> 
 
</table> 
 

 
<div class="but"> 
 
     <input type="button" class="button" value="BUTTON" /> 
 
</div>