Tabela reagowania rozruchowego z wprowadzeniem formularza o szerokości min.

Question

Próbuję utworzyć tabelę elastyczną, która zawiera dane wejściowe formularza dla kilku kolumn. Z tego, co rozumiem, tabele reagujące kurczą się, aż kolumny nie mogą już iść dalej, a następnie dodaje rolkę. Jednak kolumny kurczą się do punktu, w którym nie widzę wartości w polu wejściowym, więc potrzebuję sposobu narzucenia minimalnej szerokości na tych kolumnach zamiast określenia jej przez długość tekstu nagłówka kolumny.

Próbowałem dodać min-width: "10%" lub "150px" do wszystkich elementów w kolumnie, ale to nie zadziałało. Oto moja konfiguracja:

<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>

Jak widać, niektóre wartości pól są odcięte gdy stół kurczy. Każda pomoc jest doceniana.

Edytuj: Chciałbym jak, aby nadal używać tabel ze względu na zachowanie starszego kodu. Jestem jednak otwarty na wszelkie rozwiązania, jeśli zajdzie taka potrzeba.

Answer 1

Domyślna css sił .form-kontrolnych ten problem, więc trzeba zmienić css swojego pola wejściowego jak:

input.form-control { 
    width: auto; 
} 

Answer 2

szerokość kolumny będzie dynamiczny, jak użytkownik może wprowadzić dowolną wartość długości! Owinąć pól wejściowych w div ustawić szerokość div dynamicznie przy użyciu JavaScript:

   <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> 

a funkcja JS:

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