css - 如何垂直对齐列内容并设置适合的列宽？

Question

Visual Studio 2017； ASP.NET 核心 MVC； Razor ; Bootstrap

这是我的 cshtml-file 的一部分:

<table class="table table-striped table-bordered">
    <colgroup>
        <col />
        <col style="width:auto; white-space:nowrap" />
    </colgroup>
    <tbody>
        @foreach (var item in Model) {
            <tr>
                <td style="vertical-align:central">@item.TemplateName</td>
                <td>
                    <div class="btn-group pull-right">
                        <a class="btn btn-default" href="#" title="Редактировать">
                            <span class="glyphicon glyphicon-edit"
                                  aria-hidden="true"></span>
                        </a>
                        <a class="btn btn-default" href="#" title="Копировать">
                            <span class="glyphicon glyphicon-plus-sign"
                                  aria-hidden="true"></span>
                        </a>
                        <a class="btn btn-default" href="#" title="Удалить">
                            <span class="glyphicon glyphicon-remove"
                                  aria-hidden="true"></span>
                        </a>
                    </div>
                </td>
            </tr>
        }
    </tbody>
</table>

结果和我预想的不一样:

我需要第一列的内容垂直居中。我还需要根据其内容调整第二列的宽度。

我怎样才能得到它？

Answer 1

你能看看这个吗 http://plnkr.co/edit/I8XBE1kAG8qd0ivWRDhS?p=preview

vertical-align:middle //align vertically middle

<td style="width:1%;white-space:nowrap">
<div class="btn-group pull-right" style="width: auto;min-width: 120px;">
//to fit column width according to its content.