How to do this specifically things in CSS for a table - html

Question

I want to do some things with my table but I think an image would sum it up as my english is not the best.
I want to first move the second button to the left. Just one button on each corner on top of my table.
And secondly I want to avoid my input textbox (or a button later) to resieze the whole row of the 2nd header.
Any help will do. I can't figure it out by myself.
Code
#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>
}
Partial View Code
#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

This is the code for making the table looking the right way. For the button, use bootstrap's 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>
If it helps, +1.

Answer 2

Without the real page i'm not sure, but:
To move the button on the right use bootstrap class pull-right.
To have every row at the same height. I think td have some padding inside. Put padding to 0 and fix the height in css
.table td {
height: 30px;
vertical-align: middle;
}
Or something like this