セル内の他の要素を考慮せずに、HTML表のセルのテキストを整列する方法

Question

同じdivの他の要素を数えずに列内のテキストをdivに合わせるにはどうしたらいいですか？

td { 
 
    border: 1px solid black; 
 
    width: 150px; 
 
    text-align: center; 
 
} 
 

 
button { 
 
    float: right; 
 
}

<table> 
 
    <tr> 
 
    <td>text1</td> 
 
    </tr> 
 
    <td>text2<button>ok</button></td> 
 
    <tr> 
 
    <td>text3</td> 
 
    </tr> 
 
</table>

Answer 1

を

以下

.yourclass{ 
    text-align: center; 
} 

を追加ボタン上にあるので、無視してテキストを中央揃えにすることができます。

td { 
 
    border: 1px solid black; 
 
    width: 150px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.okButton { 
 
position: absolute; 
 
right: 0; 
 
top: 0; 
 
}

<table> 
 
    <tr> 
 
    <td>text1</td> 
 
    </tr> 
 
    <td>text2<button class="okButton">ok</button></td> 
 
    <tr> 
 
    <td>text3</td> 
 
    </tr> 
 
</table>

Answer 2

あなたはを使用する必要があるとしているテキストにクラスを付けて、あなたのCSSで

Answer 3

は約clearing the floatティン要素であるかblock formatting context

程度つまりこれは、あなたがそれを使用することができ、あなたは何が起こっているかを理解するのに役立つか

それを避ける必要があります

以下の例では、divでブロックの書式設定コンテキストをトリガーするためにoverflowを使用しています（テーブル要素は自然に行います）。

あなたのコードでは、最初にdivの書式設定コンテキストがトリガーされませんでした。そのため、浮動小数点型の要素をminfdしませんでした。

td, div { 
 
    border: 1px solid black; 
 
    width: 150px; 
 
    text-align: center; 
 
    overflow:hidden 
 
} 
 

 
button { 
 
    float: right; 
 
}

<p>In a 'table'</p> 
 
<table> 
 
    <tr> 
 
    <td>text1</td> 
 
    </tr> 
 
    <td>text2<button>ok</button></td> 
 
    <tr> 
 
    <td>text3</td> 
 
    </tr> 
 
</table> 
 

 
<p>In a 'div' with block formatting context to mind the floatting button. </p> 
 
<div>text1</div> 
 
<div>text2<button>ok</button></div> 
 
<div>text3</div>