Good morning. I'm a beginner, I'm trying to decrease the size of the edit column and I'm not getting it according to the image below. Can anyone help me?
<thead>
<tr>
@*Campo Nome*@
<th class="col-xs-10 text-center">
@Html.DisplayNameFor(model => model.Nome)
</th>
<th class="col-xs-2 text-center"> Editar </th>
</tr>
</thead>
Sincerely, Thiago Corrêa.
Home you can not change the structure from table to div as your friend Wallace suggested here has a table template only with Bootstrap classes default .
Note that setting the size of col- from the first th to the second nor th assumed an implicit width.
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<table class="table table-bordered table-striped">
<thead>
<tr class="text-center">
<th class="col-xs-10 text-center">nome</th>
<th class="text-center">editar</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td>nome</td>
<td><button class="btn btn-primary">X</button></td>
</tr>
<tr class="text-center">
<td>nome</td>
<td><button class="btn btn-primary">X</button></td>
</tr>
<tr class="text-center">
<td>nome</td>
<td><button class="btn btn-primary">X</button></td>
</tr>
</tbody>
</table>
</div> Now if you want to do with some custom CSS you can simply determine a width of 100% for first TH , so it occupies all space and the second TH only occupies the size of itself.
In this example I created a class .w-100 that corresponds to width:100% and put it in the first TH , just this ...
.w-100 {
width: 100%;
}<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<table class="table table-bordered table-striped">
<thead>
<tr class="text-center">
<th class="w-100 text-center">nome</th>
<th class="text-center">editar</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td>nome</td>
<td><button class="btn btn-primary">X</button></td>
</tr>
<tr class="text-center">
<td>nome</td>
<td><button class="btn btn-primary">X</button></td>
</tr>
<tr class="text-center">
<td>nome</td>
<td><button class="btn btn-primary">X</button></td>
</tr>
</tbody>
</table>
</div> First question: Why are you using table to align elements?
This is conceptually wrong. Use table for tabular data only.
Bootstrap provides row , which allows elements to be aligned through a grid.
So:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-10">
<label>Editar</label>
<input type="text" class="form-control">
</div>
<div class="col-xs-2">
<label> </label>
<div>
<button class="btn btn-default">
Editar
</button>
</div>
</div>
</div>