Form girişi min genişliğine sahip Bootstrap yanıt tablosu

Question

Birkaç sütun için form girdisi içeren bir duyarlı tablo oluşturmaya çalışıyorum. Anladığım kadarıyla, yanıt veren tablolar, sütunları daha fazla ilerleyemedikçe küçülüyor, ardından bir kaydırma çubuğu ekler. Bununla birlikte, sütunlar giriş alanındaki değerleri göremediğim noktaya daralmaktadır, bu nedenle sütun başlık metni uzunluğu tarafından belirlenen yerine, bu sütunlarda minimum genişlik yerleştirmek için bir yol ihtiyacım var.

Sütundaki tüm öğelere minimum "genişlik:"% 10 "veya" 150 piksel "eklemeyi denedim, ancak çalışmadı. Gördüğünüz gibi masa küçülür, bazı alan değerleri kesilir

<form class="form-horizontal"> 
    <div class="table-responsive"> 
     <table class="table table-bordered table-striped table-highlight"> 
      <thead> 
       <th>Name</th> 
       <th>Date</th> 
       <th>Cost</th> 
       <th>Billing Type</th> 
       <th>Tax</th> 
       <th>Other Col</th> 
       <th>Other Col</th> 
       <th>Other Col</th> 
       <th>Total</th> 
      </thead> 
      <tbody> 
       <tr> 
        <td><input type="text" class="form-control" value="Some Long Name Here"/></td> 
        <td><input type="text" class="form-control" value="13-Jul-2015"/></td> 
        <td><input type="text" class="form-control" value="$12355.12"/></td> 
        <td> 
         <select class="form-control"> 
          <option>Monthly</option> 
          <option>Yearly</option> 
         </select> 
        </td> 
        <td><input type="text" class="form-control" value="another long value"/></td> 
        <td><input type="text" class="form-control" value="some val"/></td> 
        <td><input type="text" class="form-control" value="some val"/></td> 
        <td><input type="text" class="form-control" value="some val"/></td> 
        <td>$505.79</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</form> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<form class="form-horizontal"> 
 
    <div class="table-responsive"> 
 
    <table class="table table-bordered table-striped table-highlight"> 
 
     <thead> 
 
     <th>Name</th> 
 
     <th>Date</th> 
 
     <th>Cost</th> 
 
     <th>Billing Type</th> 
 
     <th>Tax</th> 
 
     <th>Other Col</th> 
 
     <th>Other Col</th> 
 
     <th>Other Col</th> 
 
     <th>Total</th> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td><input type="text" class="form-control" value="Some Long Name Here" /></td> 
 
      <td><input type="text" class="form-control" value="13-Jul-2015" /></td> 
 
      <td><input type="text" class="form-control" value="$12355.12" /></td> 
 
      <td> 
 
      <select class="form-control"> 
 
          <option>Monthly</option> 
 
          <option>Yearly</option> 
 
         </select> 
 
      </td> 
 
      <td><input type="text" class="form-control" value="another long value" /></td> 
 
      <td><input type="text" class="form-control" value="some val" /></td> 
 
      <td><input type="text" class="form-control" value="some val" /></td> 
 
      <td><input type="text" class="form-control" value="some val" /></td> 
 
      <td>$505.79</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</form>

: İşte benim kurulduğundan. Herhangi bir yardım takdir edilir.

Düzenleme: Bazı eski kod koruma nedeniyle tablo kullanmaya devam etmek için gibi 10 olur. Ancak, gerekirse, herhangi bir çözüme açığım.

Answer 1

.form kontrol kuvvetlerinin bu davranış varsayılan css, sen gibi girdi alanının css değiştirmeniz gerekir böylece:

input.form-control { 
    width: auto; 
} 

Answer 2

Sütun genişliği kullanıcıya may giriş herhangi bir uzunlukta değeri gibi dinamik olacak! , Set div genişliğinin dinamik JavaScript kullanarak bir div giriş alanlarını sarın:

   <tr> 
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" size="80" value="Some Long Name Here"/></div></td> 
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="13-Jul-2015"/></div></td> 
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="$12355.12"/></div></td> 
<td> 
    <select class="form-control"> 
     <option>Monthly</option> 
     <option>Yearly</option> 
    </select> 
</td> 
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="another long value"/></div></td> 
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="some val"/></div></td> 
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="some val"/></div></td> 
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="some val"/></div></td> 
<td>$505.79</td> 
      </tr> 

Ve JS işlevini: Eğer datatables kullanıyorsanız

<script> 
function updateWidth(textbox) { 
     $(textbox).parent().css("width",(textbox.value.length + 2) + "em"); 
} 
</script>