如何在 CSS 中为表格执行此操作

Question

我想对我的桌子做一些事情，但我认为image 会总结为我的英语不是最好的。

我想先将第二个按钮向左移动。我桌子上的每个角落只有一个按钮。 其次，我想避免我的输入文本框（或稍后的按钮）重新调整第二个标题的整行。

任何帮助都可以。我自己想不出来。

代码

@Html.ActionLink("Reset filters", "Index",
            null,
            new { @class = "btn btn-success custom", @style = "color:white", @role = "button" }
            )

<button class="btn btn-default custom" type="submit"><i class="glyphicon glyphicon-file"></i> Export to Excel</button>

<div style="padding-top: 12px"></div>

    @using (Html.BeginForm("Index", "Materials", FormMethod.Get))
    {           
        <div id="grid-list">
            @{ Html.RenderPartial("_AjaxMaterialList", Model); }
        </div>
    }

部分查看代码

@using PagedList.Mvc <!--import this so we get our HTML Helper-->

@model IPagedList<eContentMVC.Models.Material>

<!-- import the included stylesheet for some (very basic) default styling -->
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@*<div style="padding-top: 14px"></div>*@

<div class="panel panel-primary filterable" style="padding: 0px;
    margin: 0px">
    <div class="panel-heading">
        <h3 class="panel-title">GDS eContent Master Data Service Tool</h3>
    </div>
    <table class="table table-bordered table-hover" style="width:100%">
        <thead>
            <tr>
                <th class="centerAlign" style="width:14%">Brand</th>
                <th class="centerAlign" style="width:25%">Category</th>
                <th class="centerAlign" style="width:13%">Language</th>
                <th class="centerAlign" style="width:7%">BCO</th>
                <th class="centerAlign" style="width:9%">Material Cod</th>
                <th class="centerAlign" style="width:7%">Derivation</th>
                <th class="centerAlign" style="width:7%">Artwork</th>
                <th class="centerAlign" style="width:7%">Delivery</th>
                <th class="centerAlign" style="width:5%">Export</th>
            </tr>
            <tr>
                <th class="centerAlign" style="height:4%"><input type="text" /></th>
                <th class="centerAlign"><input type="text" /></th>
                <th class="centerAlign"><input type="text" /></th>
                <th class="centerAlign"><input type="text" /></th>
                <th class="centerAlign"><input type="text" /></th>
                <th class="centerAlign"><input type="text" /></th>
                <th class="centerAlign"><input type="text" /></th>
                <th class="centerAlign"><input type="text" /></th>
                <th class="centerAlign"><input type="text" /></th>
            </tr>
        </thead>

        <tbody>
            // Content 
        </tbody>

    </table>    
</div>

<div class="centerAlign" style="padding: 0px; margin: -8px">
<!-- output a paging control that lets the user navigation to the previous page, next page, etc -->
@Html.PagedListPager(Model, page => Url.Action("Index", "Materials", new
    {
        brand_name = Request["brand_name"],
        page
    }))
</div>

Answer 1

这是使表格看起来正确的代码。对于按钮，使用引导程序的 pull-right。

* {
    box-sizing:border-box;
}
.mytable tr th{
    height:42px;
}
.mytable input{
    width:100%;
}
.mytable th:nth-of-type(1){
    width:14%;
}
.mytable th:nth-of-type(2){
    width:25%;
}
.mytable th:nth-of-type(3){
    width:13%;
}
.mytable th:nth-of-type(4),.mytable th:nth-of-type(6),.mytable th:nth-of-type(7),.mytable th:nth-of-type(8){
    width:7%;
}
.mytable th:nth-of-type(5){
    width:9%;
}
.mytable th:nth-of-type(9){
    width:5%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="panel panel-primary filterable">
    <div class="panel-heading">
         <h3 class="panel-title">GDS eContent Master Data Service Tool</h3>

    </div>
    <table class="table table-bordered table-hover mytable">
        <thead>
            <tr>
                <th class="centerAlign">Brand</th>
                <th class="centerAlign">Category</th>
                <th class="centerAlign">Language</th>
                <th class="centerAlign">BCO</th>
                <th class="centerAlign">Material Cod</th>
                <th class="centerAlign">Derivation</th>
                <th class="centerAlign">Artwork</th>
                <th class="centerAlign">Delivery</th>
                <th class="centerAlign">Export</th>
            </tr>
            <tr>
                <th class="centerAlign">
                    <input type="text" />
                </th>
                <th class="centerAlign">
                    <input type="text" />
                </th>
                <th class="centerAlign">
                    <input type="text" />
                </th>
                <th class="centerAlign">
                    <input type="text" />
                </th>
                <th class="centerAlign">
                    <input type="text" />
                </th>
                <th class="centerAlign">
                    <input type="text" />
                </th>
                <th class="centerAlign">
                    <input type="text" />
                </th>
                <th class="centerAlign">
                    <input type="text" />
                </th>
                <th class="centerAlign">
                    <input type="text" />
                </th>
            </tr>
        </thead>
    </table>
</div>
<div class="centerAlign" style="padding: 0px; margin: -8px"></div>

如果有帮助，+1。

Answer 2

没有真实页面我不确定，但是：

• 要移动右侧的按钮，请使用引导类pull-right。

• 让每一行都处于相同的高度。我认为 td 里面有一些填充。将填充设置为 0 并在 css 中固定高度

  .table td { 高度：30px； 垂直对齐：中间； }

或者类似的东西