javascript - 我怎样才能拥有能够扩展一行中所有列的 Bootstrap 文本区域

Question

我有以下 Bootstrap 表，我想为一行添加一个文本区域。但该文本区域应该扩展到所有列。我提供了一个图像示例。

对于第 2 行，我想要 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给您<td>其中包含 textarea并给出文本区域 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>