2017-03-03 12 views
1

HTML表のセルに複数の要素があります。私はいくつかの要素をセルの底に整列させ、いくつかは上に整列させたい。要素を底に整列させるのに問題があります。私のテーブルには、次のとおりです。要素をHTML表のセルの下部に揃えます。

<tr> 
     <td style="background-color: #007CE2"> 
      <p id="t1_list">test<br>another<br>testing</p> 
      <input type="text" name="t1_input" id="t1_input"> 
      <button> 
       Add 
      </button> 
     </td> 
     <td style="background-color: #E54040"> 
      <p id="t2_list"></p> 
      <div class="value_input2"> 
       <input type="text" name="t2_input" id="t2_input"> 
       <button> 
        Add 
       </button> 
      </div> 
     </td> 
    </tr> 

div要素内の要素は、セルの中央に滞在したい、というよりも下部に滞在しているようだが。私は今までCSSで2つの異なる方法を試してきました。

div.value_input { 
    position: absolute; 
    bottom: 0; 
} 

これは、ページの一番下までdivを取ります。そして:

div.value_input2 { 
    display: table-cell; 
    vertical-align: bottom; 
} 

これは効果がありません。

私は、セルの底に整列する入力ボックスとボタンを取得するために何をする必要がありますどのようなここにJSFiddle

のコードを持っていますか?

答えて

2

:相対して、あなたがポジションを試すことができますが絶対配置を使用するために使用します。ここには動作するスニペットがあります。

table { 
 
    \t \t border-collapse: collapse; 
 
\t \t } 
 

 
\t \t table, th, td { 
 
\t \t  border: 2px solid black; 
 
     position:relative; 
 
\t \t } 
 

 
\t \t div.value_input { 
 
\t \t \t position: absolute; 
 
     bottom: 0; 
 
\t \t } 
 
    
 
    div.value_input2 { 
 
     position:absolute; 
 
     bottom:0; 
 
    }
<table> 
 
\t \t <tr> 
 
\t \t \t <th style="background-color: #007CE2"> 
 
\t \t \t \t Test 
 
\t \t \t </th> 
 
\t \t \t <th style="background-color: #E54040"> 
 
\t \t \t \t Test 
 
\t \t \t </th> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color: #007CE2"> 
 
\t \t \t \t <p id="t1_list">test<br>another<br>testing</p> 
 
\t \t \t \t <input type="text" name="t1_input" id="t1_input"> 
 
\t \t \t \t <button> 
 
\t \t \t \t \t Add 
 
\t \t \t \t </button> 
 
\t \t \t </td> 
 
\t \t \t <td style="background-color: #E54040"> 
 
\t \t \t \t <p id="t2_list"></p> 
 
\t \t \t \t <div class="value_input2"> 
 
\t \t \t \t \t <input type="text" name="t2_input" id="t2_input"> 
 
\t \t \t \t \t <button> 
 
\t \t \t \t \t \t Add 
 
\t \t \t \t \t </button> 
 
\t \t \t \t </div> 
 
\t \t \t </td> 
 
\t \t </tr> 
 

 
\t \t <tr> 
 
\t \t \t <th style="background-color: #8BC34A"> 
 
\t \t \t \t Test 
 
\t \t \t </th> 
 
\t \t \t <th style="background-color: #FF9800"> 
 
\t \t \t \t Test 
 
\t \t \t </th> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color: #8BC34A"> 
 
\t \t \t \t <p id="t3_list"></p> 
 
\t \t \t \t <input type="text" name="t3_input" id="t3_input"> 
 
\t \t \t \t <button> 
 
\t \t \t \t \t Add 
 
\t \t \t \t </button> 
 
\t \t \t </td> 
 
\t \t \t <td style="background-color: #FF9800"> 
 
\t \t \t \t <p id="t4_list"></p> 
 
\t \t \t \t <input type="text" name="t4_input" id="t4_input"> 
 
\t \t \t \t <button> 
 
\t \t \t \t \t Add 
 
\t \t \t \t </button> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </table>

0

表のセル位置してください:あなたは相対position:relativeに親要素の位置を設定する必要が再びのdivに絶対...

table tr td { 
    position: relative; 
} 

div.value_input2 { 
    position: absolute; 
    bottom: 0; 
} 

fiddle

2

あなたはこの中で動作するように垂直方向の整列のためのheight:somepxを必要としています。

関連する問題