Wie kann ich bootstrap textarea haben, die für alle Spalte in einer Zeile erweitert werden

Question

Ich habe die folgende Bootstrap-Tabelle, ich möchte ein Textfeld für eine Zeile hinzufügen. Aber dieser Textbereich sollte auf alle Spalten erweitert werden. Ich habe ein Bildbeispiel aufgenommen.

Für Zeile 2 möchte ich die 4 Spalten und die Textarea haben. Der Textbereich sollte alle Spalten wie im Bild unten gezeigt abdecken.

Ist es möglich, zu tun?

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <table id="table" class="table table-bordered"> 
 
     <thead> 
 
     <tr> 
 
      <th data-field="state" data-radio="true"></th> 
 
      <th data-field="name">Name</th> 
 
      <th data-field="starts">Stars</th> 
 
      <th data-field="forks">Forks</th> 
 
      <th data-field="description">Description</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td><input type="radio" name="radioGroup"></td> 
 
      <td> 
 
       <a href="https://github.com/wenzhixin/bootstrap-table">bootstrap-table</a> 
 
      </td> 
 
      <td>526</td> 
 
      <td>122</td> 
 
      <td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><input type="radio" name="radioGroup" checked></td> 
 
      <td> 
 
       <a href="https://github.com/wenzhixin/multiple-select">multiple-select</a> 
 
      </td> 
 
      <td>288</td> 
 
      <td>150</td> 
 
      <td>A jQuery plugin to select multiple elements with checkboxes :) 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><input type="radio" name="radioGroup"></td> 
 
      <td> 
 
       <a href="https://github.com/wenzhixin/bootstrap-show-password">bootstrap-show-password</a> 
 
      </td> 
 
      <td>32</td> 
 
      <td>11</td> 
 
      <td>Show/hide password plugin for twitter bootstrap. 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table>

Answer 1

Sie können es erreichen in der folgenden way-- hinzufügen colspan=12 zu Ihrem <td> die die textarea enthält und geben Sie den Textbereich width:100%

Arbeits Snippet

textarea { 
 
width:100%; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <table id="table" class="table table-bordered"> 
 
     <thead> 
 
     <tr> 
 
      <th data-field="state" data-radio="true"></th> 
 
      <th data-field="name">Name</th> 
 
      <th data-field="starts">Stars</th> 
 
      <th data-field="forks">Forks</th> 
 
      <th data-field="description">Description</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td><input type="radio" name="radioGroup"></td> 
 
      <td> 
 
       <a href="https://github.com/wenzhixin/bootstrap-table">bootstrap-table</a> 
 
      </td> 
 
      <td>526</td> 
 
      <td>122</td> 
 
      <td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><input type="radio" name="radioGroup" checked></td> 
 
      <td> 
 
       <a href="https://github.com/wenzhixin/multiple-select">multiple-select</a> 
 
      </td> 
 
      <td>288</td> 
 
      <td>150</td> 
 
      <td>A jQuery plugin to select multiple elements with checkboxes :) 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><input type="radio" name="radioGroup"></td> 
 
      <td> 
 
       <a href="https://github.com/wenzhixin/bootstrap-show-password">bootstrap-show-password</a> 
 
      </td> 
 
      <td>32</td> 
 
      <td>11</td> 
 
      <td>Show/hide password plugin for twitter bootstrap. 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
    <td colspan="12"> 
 
    <textarea></textarea> 
 
    </td> 
 
    </tr> 
 
     
 
     </tbody> 
 
    </table>