Comment puis-je avoir textarea bootstrap qui va développer pour toute la colonne dans une rangée

Question

J'ai la table de bootstrap suivante, je veux ajouter un textarea pour une ligne. Mais cette zone de texte doit être étendue à toutes les colonnes. J'ai inclus un exemple d'image.

Pour la ligne 2, je veux avoir les 4 colonnes et la zone de texte. La zone de texte doit couvrir toute la colonne comme indiqué dans l'image ci-dessous.

Est-il possible de faire ?

<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

Vous pouvez obtenir dans le way-- suivant Ajouter à votre colspan=12<td> qui contient le textarea et donner à la zone de texte width:100%

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