如何垂直对齐色谱柱内容并设置适合的色谱柱宽度？

Question

Visual Studio 2017; ASP.NET核心MVC;剃刀;自举

这是我的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.