如何让bootstrap textarea扩展到一行中的所有列？

Question

我有下面的引导表，我想为一行添加一个文本区。但是该文本区域应该扩展到所有列。我已经包含了一个图像示例。

对于第二行，我希望有4列和文本区域。文本区域应覆盖所有列，如下图所示。

有没有可能做

​

<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

您可以通过以下方式实现它--将colspan=12添加到包含textarea的<td>中，并将文本区域设置为width:100%

工作代码段

​

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>

​