Decrease Field Size Edit

Question

good morning. I’m beginner, I’m trying to decrease the size of the column edit and I’m not getting as the image below. Can someone 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 yours truly, Thiago Corrêa.

Answer 1

First question: why are you wearing table to align the elements?

This is conceptually wrong. Use table for tabular data only.

Bootstrap provides the row, which allows the alignment of elements by means of a grid.

Thus:

<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>&nbsp;</label>
    <div>
    <button class="btn btn-default">
      Editar
    </button>
    </div>
  </div>
</div>

Answer 2

House vc can not change the structure of table for div as his friend Wallace suggested here is a model of table only with the classes default bootstrap.

see that setting the size of col- of the first th 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>

---

w-100

Now if you want to do with some custom CSS you can simply determine a width of 100% for the first TH, so it takes up all the space and the second TH only occupies her own size.

In this example I created a class .w-100 which corresponds to width:100% and put in the first TH, only that...

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