如何使表的中间列填充剩余的宽度并在必要时包装其内容

时间:2014-11-17 08:21:44

标签: html css html-table

我有一个简单的页面,用于指定用户的文件。表格中的每一行都有三个“td”。第一个tdis是一个标签,最后一个td是一个按钮。中间td用于显示给定文件的完整路径。中间的td预计将填满剩余的空间,如果文件名太长,它应该包装其内容。

<table style="width:100%;">
    <tr style="width:100%;">
        <td style="width:auto;background:red;white-space:nowrap;">
            <span>License File</span>
        </td>
        <td style="width:100%;background:blue;white-space:normal">
            <div style="display:block;">
                <span class="file_name"></span>
            </div>
        </td>
        <td style="width:auto;background:gray;white-space:nowrap;">
            <input type="button" value="Install License File" />
        </td>
    </tr>

    <tr style="width:100%;">
        <td style="width:auto;background:red;white-space:nowrap;">
            <span>Control File</span>
        </td>
        <td style="width:100%;background:blue;white-space:normal">
            <div style="display:block;">
                <span class="file_name"></span>
            </div>
        </td>
        <td style="width:auto;background:gray;white-space:nowrap;">
            <input type="button" value="Install Control File" />
        </td>
    </tr>
</table>

0 个答案:

没有答案