多くのテキストボックスを異なるtdテーブルに揃える方法は？

-2

これらのテキストボックスを各td（空白を除く）に揃え、これらのテキストボックスと同じサイズを与えたいと思います。それは非常に簡単かもしれませんが、私はhtmlの初心者です。ここで

は私のhtmlコードは以下のようになります。

<div class="form-inline"> 
     <input class="form-control" id="annualBudget" type="text" style="width:auto;" value=""> 
     <input class="form-control" id="moMeca" type="text" style="width:auto;" value=""> 
     <input class="form-control" id="moCarro" type="text" style="width:auto;" value=""> 
     <input class="form-control" id="moPeint" type="text" style="width:auto;" value=""> 
     <input class="form-control" id="moDepa" type="text" style="width:auto;" value=""> 
     <input class="form-control" id="moCessions" type="text" style="width:auto;" value=""> 
     <input class="form-control" id="piecesMeca" type="text" style="width:auto;" value=""> 
    </div>

出典

2017-08-04 Hoareau Thomas

私のCSSは、単に – Vishnu

あなたのCSSでの作業スニペットを追加してください？ https://jsfiddle.net/ –

あなたが作業フィドルを作成することができますをブートストラップされ – zelitomas

-1

<div class="form-group"> 
 
<table> 
 
<tr> 
 
    <td>   
 
    <input class="form-control col-md-2" id="annualBudget" type="text" style="width:auto;" value=""></td> 
 
<td> 
 
     <input class="form-control col-md-2" id="moMeca" type="text" style="width:auto;" value=""> 
 
</td> 
 
<td> 
 
     <input class="form-control col-md-2" id="moCarro" type="text" style="width:auto;" value=""> 
 
</td> 
 
<td> 
 
     <input class="form-control" id="moPeint" type="text" style="width:auto;" value=""> 
 
</td> 
 
<td> 
 
     <input class="form-control" id="moDepa" type="text" style="width:auto;" value=""> 
 
</td> 
 
<td> 
 
     <input class="form-control" id="moCessions" type="text" style="width:auto;" value=""> 
 
</td> 
 
<td> 
 
<input class="form-control" id="piecesMeca" type="text" style="width:auto;" value=""> 
 
</td> 
 
</tr> 
 
</table> 
 
</div>

出典

2017-08-04 10:07:49

はあなたがフォーム要素を持っていない場合は、テーブル構造を使用することができ 1.を行うことができ二つのことがあります。 html。 2. Major divにBootstrapクラスの行を使用し、異なるdivを修正サイズの親div内に作成してから、フォーム要素も処理できます。

ここにテーブル構造を付けています。ここで

<html> 
<body> 
<table border="1"> 
    <thead> 
    <tr> 
     <th></th> 
     <th>1</th> 
     <th>1</th> 
     <th>1</th> 
     <th>1</th> 
     <th>1</th> 
     <th>1</th> 
     <th>1</th> 
    </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td></td> 
      <td> 
       <input class="form-control" id="annualBudget" type="text" style="width:auto;" value=""> 
      </td> 
      <td> 
       <input class="form-control" id="annualBudget" type="text" style="width:auto;" value=""> 
      </td> 
      <td> 
       <input class="form-control" id="annualBudget" type="text" style="width:auto;" value=""> 
      </td> 
      <td> 
       <input class="form-control" id="annualBudget" type="text" style="width:auto;" value=""> 
      </td> 
      <td> 
       <input class="form-control" id="annualBudget" type="text" style="width:auto;" value=""> 
      </td> 
      <td> 
       <input class="form-control" id="annualBudget" type="text" style="width:auto;" value=""> 
      </td> 
      <td> 
       <input class="form-control" id="annualBudget" type="text" style="width:auto;" value=""> 
      </td> 
     </tr> 
    </tbody> 
</table> 

</body> 
</html>

出典

2017-08-04 10:15:10

あなたは、各tdの幅を取得し、input text boxに割り当てる必要がありソリューションhttps://jsfiddle.net/95m2nhth/1/

$('table tbody tr:first-child td').each(function(i){ 
 
\t var w = $(this).width(); 
 
\t $('.input:nth-child(' + (i+1) + ')').css('width',w); 
 
});

td { 
 
    border: 2px solid; 
 
} 
 

 
input { 
 
    padding: 0.3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-inline"> 
 
    <input class="input" id="annualBudget" type="text" style="width:auto;" value=""> 
 
    <input class="input" id="moMeca" type="text" style="width:auto;" value=""> 
 
    <input class="input" id="moCarro" type="text" style="width:auto;" value=""> 
 
    <input class="input" id="moPeint" type="text" style="width:auto;" value=""> 
 
    <input class="input" id="moDepa" type="text" style="width:auto;" value=""> 
 
    <input class="input" id="moCessions" type="text" style="width:auto;" value=""> 
 
    <input class="input" id="piecesMeca" type="text" style="width:auto;" value=""> 
 
</div> 
 

 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>Test1</td> 
 
     <td>Testing ABC</td> 
 
     <td>Te</td> 
 
     <td>Increase in td size</td> 
 
     <td>Incearse</td> 
 
     <td>Testing with long long text</td> 
 
     <td>test</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

で行きます。

出典

2017-08-04 10:27:52 Shiladitya

最も簡単な方法は、あなたのテーブルに別の行を追加することです：

table { border: 2px solid black; } 
 
th, td { border: 1px solid black; }

<table> 
 
<thead> 
 
    <tr><th>Budget annuel 
 
     <th>M.O. Mécanique 
 
     <th>M.O. Carroserie 
 
     <th>M.O. Peinture 
 
     <th>M.O. Dépannage 
 
     <th>M.O. Cessions 
 
     <th>Pièces Méca 
 
<tbody> 
 
    <tr><td><input class="form-control" id="annualBudget" type="text" value=""> 
 
     <td><input class="form-control" id="moMeca" type="text" value=""> 
 
     <td><input class="form-control" id="moCarro" type="text" value=""> 
 
     <td><input class="form-control" id="moPeint" type="text" value=""> 
 
     <td><input class="form-control" id="moDepa" type="text" value=""> 
 
     <td><input class="form-control" id="moCessions" type="text" value=""> 
 
     <td><input class="form-control" id="piecesMeca" type="text" value=""> 
 
</table>

出典

2017-08-04 11:09:01

多くのテキストボックスを異なるtdテーブルに揃える方法は？

答えて

関連する問題