Html 如何在CSS中为一个表专门做这些事情

我想用我的桌子做一些事情，但我想安会总结一下，因为我的英语不是最好的

我想先把第二个按钮移到左边。我的桌子上每个角落只有一个按钮。 其次，我希望避免我的输入文本框（或稍后的按钮）调整第二个标题的整行大小

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

代码

@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>

@Html.ActionLink（“重置过滤器”、“索引”，
无效的
新建{@class=“btn btn success custom”、@style=“color:white”、@role=“button”}
)
输出到Excel
@使用（Html.BeginForm（“Index”，“Materials”，FormMethod.Get））
{           
@{Html.RenderPartial（“_ajaxmeteriallist”，Model）；}
}

局部视图代码

@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>

使用PagedList.Mvc @IPagedList模型 @**@ GDS eContent主数据服务工具 品牌 类别 语言 BCO 材料化学需氧量 起源 艺术品 传送 出口 //内容 @PagedListPager（模型，页面=>Url.Action（“索引”，“材料”），新 { 品牌名称=请求[“品牌名称”]， 页 }))

---

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

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

  向右拉

• 使每一排都处于同一高度。我想里面有一些填充物。将填充设置为0，并在css中固定高度
  .表td{ 高度：30px； 垂直对齐：中间对齐； }

---

或者类似这样的代码，这是使表格看起来正确的代码。对于按钮，使用引导的向右拉

*{
框大小：边框框；
}
.mytable tr th{
高度：42px；
}
.mytable输入{
宽度：100%；
}
.mytable th:nth类型（1）{
宽度：14%；
}
.mytable th:nth类型（2）{
宽度：25%；
}
.mytable th:nth类型（3）{
宽度：13%；
}
.mytable th:n类型（4），.mytable th:n类型（6），.mytable th:n类型（7），.mytable th:n类型（8）{
宽度：7%；
}
.mytable th:nth类型（5）{
宽度：9%；
}
.mytable th:nth类型（9）{
宽度：5%；
}

GDS eContent主数据服务工具
品牌
类别
语言
BCO
材料化学需氧量
起源
艺术品
传送
出口

它不起作用。它无法识别mytable类。当被调用时，这些都不起作用。我正在试图找出我做错了什么。你把css放在应该放的地方了吗？手动将

style=“box size:border box；height:42px”

添加到

th

没有任何作用。使用css文件。像这样，它会因为某种原因而认不出它们。但是我手动添加了

高度

，效果很好<代码>框大小没有做任何事情，但没关系，高度是困扰我的问题。答案被接受。