फॉर्म इनपुट न्यूनतम चौड़ाई

Question

के साथ बूटस्ट्रैप उत्तरदायी तालिका मैं एक उत्तरदायी तालिका बनाने की कोशिश कर रहा हूं जिसमें कई कॉलम के लिए फॉर्म इनपुट शामिल हैं। जो मैं समझता हूं, उससे उत्तरदायी सारणी तब तक कम हो जाती है जब तक कि इसके कॉलम आगे नहीं जा सकें, फिर यह एक स्क्रोलर जोड़ता है। हालांकि, कॉलम उस बिंदु पर संक्षिप्त हो जाते हैं जहां मैं इनपुट फ़ील्ड में मान नहीं देख पा रहा हूं, इसलिए मुझे कॉलम हेडर टेक्स्ट लम्बाई द्वारा निर्धारित किए जाने के बजाय इन कॉलम पर न्यूनतम चौड़ाई लगाने का एक तरीका चाहिए।

मैंने स्तंभ में सभी तत्वों के लिए न्यूनतम चौड़ाई: "10%" या "150px" जोड़ने का प्रयास किया है, लेकिन यह काम नहीं करता है।

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

आप देख सकते हैं, कुछ फ़ील्ड मान काट रहे हैं जब तालिका सिकुड़ता है: यहाँ मेरी सेटअप है। किसी भी मदद की सराहना की है।

संपादित करें: मैं जैसे कुछ विरासत कोड संरक्षण के कारण तालिकाओं का उपयोग जारी रखने के लिए होगा। हालांकि, यदि आवश्यकता हो तो मैं किसी भी समाधान के लिए खुला हूं।

Answer 1

.form नियंत्रण बलों इस व्यवहार के डिफ़ॉल्ट सीएसएस, आप की तरह अपने इनपुट क्षेत्र के सीएसएस बदलने की जरूरत है ताकि:

input.form-control { 
    width: auto; 
} 

Answer 2

स्तंभ चौड़ाई उपयोगकर्ता मई इनपुट किसी भी लम्बाई मूल्य के रूप में गतिशील हो जाएगा! एक div में लपेटें इनपुट फ़ील्ड, सेट div चौड़ाई 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> 

और जे एस समारोह:

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