How to leave the width of the last TR of the bootstrap table size?

Question

How to leave the width of the last TR of the bootstrap table size?

Asked 7 years ago

Viewed 786 times

0

I have the following table:

  <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8  col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
    <h3 class=" text-center">Treino 1 para o aluno: Y</h3>
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th class="text-center">Exercício</th>
          <th class="text-center">Distancia</th>
          <th class="text-center">Intervalo</th>
          <th class="text-center">%esf</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Aquecimento</th>
          <td class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <div class="centralizar">
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class=" row  col-md-4 ">
                <select class="form-control" id="sel1">
                  <option>25m</option>
                  <option>50m</option>
                  <option>75m</option>
                  <option>100m</option>
                  <option>125m</option>
                  <option>150m</option>
                  <option>200m</option>
                  <option>250m</option>
                  <option>300m</option>
                  <option>350m</option>
                  <option>400m</option>
                  <option>500m</option>
                  <option>600m</option>
                  <option>700m</option>
                  <option>800m</option>
                  <option>900m</option>
                  <option>1000m</option>
                  <option>1500m</option>
                </select>
              </div>
            </div>

          </td>
          <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><input  type="text" class="form-control" id="number"></td>
          <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <select class="form-control" id="sel1">
              <option>50%</option>
              <option>60%</option>
              <option>65%</option>
              <option>70%</option>
              <option>80%</option>
              <option>85%</option>
              <option>90%</option>
              <option>100%</option>
            </select>
          </td>
        </tr>
        <tr>
          <th>Alternado</th>
          <td>
            <div class="centralizar">
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class=" row  col-md-4 ">
                <select class="form-control" id="sel1">
                  <option>25m</option>
                  <option>50m</option>
                  <option>75m</option>
                  <option>100m</option>
                  <option>125m</option>
                  <option>150m</option>
                  <option>200m</option>
                  <option>250m</option>
                  <option>300m</option>
                  <option>350m</option>
                  <option>400m</option>
                  <option>500m</option>
                  <option>600m</option>
                  <option>700m</option>
                  <option>800m</option>
                  <option>900m</option>
                  <option>1000m</option>
                  <option>1500m</option>
                </select>
              </div>
            </div>

          </td>
          <td><input  type="text" class="form-control" id="number"></td>
          <td>                    
            <select class="form-control" id="sel1">
              <option>50%</option>
              <option>60%</option>
              <option>65%</option>
              <option>70%</option>
              <option>80%</option>
              <option>85%</option>
              <option>90%</option>
              <option>100%</option>
            </select>
          </td>
        </tr>
        <tr>
          <th>Braços</th>
          <td>
            <div class="centralizar">
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class=" row  col-md-4 ">
                <select class="form-control" id="sel1">
                  <option>25m</option>
                  <option>50m</option>
                  <option>75m</option>
                  <option>100m</option>
                  <option>125m</option>
                  <option>150m</option>
                  <option>200m</option>
                  <option>250m</option>
                  <option>300m</option>
                  <option>350m</option>
                  <option>400m</option>
                  <option>500m</option>
                  <option>600m</option>
                  <option>700m</option>
                  <option>800m</option>
                  <option>900m</option>
                  <option>1000m</option>
                  <option>1500m</option>
                </select>
              </div>
            </div>

          </td>
          <td><input  type="text" class="form-control" id="number"></td>
          <td>                    
            <select class="form-control" id="sel1">
              <option>50%</option>
              <option>60%</option>
              <option>65%</option>
              <option>70%</option>
              <option>80%</option>
              <option>85%</option>
              <option>90%</option>
              <option>100%</option>
            </select>
          </td>
        </tr>
        <tr>
          <th>Resistência</th>
          <td>
            <div class="centralizar">
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class=" row  col-md-4 ">
                <select class="form-control" id="sel1">
                  <option>25m</option>
                  <option>50m</option>
                  <option>75m</option>
                  <option>100m</option>
                  <option>125m</option>
                  <option>150m</option>
                  <option>200m</option>
                  <option>250m</option>
                  <option>300m</option>
                  <option>350m</option>
                  <option>400m</option>
                  <option>500m</option>
                  <option>600m</option>
                  <option>700m</option>
                  <option>800m</option>
                  <option>900m</option>
                  <option>1000m</option>
                  <option>1500m</option>
                </select>
              </div>
            </div>

          </td>
          <td><input  type="text" class="form-control" id="number"></td>
          <td>                    
            <select class="form-control" id="sel1">
              <option>50%</option>
              <option>60%</option>
              <option>65%</option>
              <option>70%</option>
              <option>80%</option>
              <option>85%</option>
              <option>90%</option>
              <option>100%</option>
            </select>
          </td>
        </tr>
        <tr>
          <th>Pernas</th>
          <td>
            <div class="centralizar">
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class=" row  col-md-4 ">
                <select class="form-control" id="sel1">
                  <option>25m</option>
                  <option>50m</option>
                  <option>75m</option>
                  <option>100m</option>
                  <option>125m</option>
                  <option>150m</option>
                  <option>200m</option>
                  <option>250m</option>
                  <option>300m</option>
                  <option>350m</option>
                  <option>400m</option>
                  <option>500m</option>
                  <option>600m</option>
                  <option>700m</option>
                  <option>800m</option>
                  <option>900m</option>
                  <option>1000m</option>
                  <option>1500m</option>
                </select>
              </div>
            </div>

          </td>
          <td><input  type="text" class="form-control" id="number"></td>
          <td>                    
            <select class="form-control" id="sel1">
              <option>50%</option>
              <option>60%</option>
              <option>65%</option>
              <option>70%</option>
              <option>80%</option>
              <option>85%</option>
              <option>90%</option>
              <option>100%</option>
            </select>
          </td>
        </tr>
        <tr>
          <th>Educativo</th>
          <td>
            <div class="centralizar">
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class=" row  col-md-4 ">
                <select class="form-control" id="sel1">
                  <option>25m</option>
                  <option>50m</option>
                  <option>75m</option>
                  <option>100m</option>
                  <option>125m</option>
                  <option>150m</option>
                  <option>200m</option>
                  <option>250m</option>
                  <option>300m</option>
                  <option>350m</option>
                  <option>400m</option>
                  <option>500m</option>
                  <option>600m</option>
                  <option>700m</option>
                  <option>800m</option>
                  <option>900m</option>
                  <option>1000m</option>
                  <option>1500m</option>
                </select>
              </div>
            </div>

          </td>
          <td><input  type="text" class="form-control" id="number"></td>
          <td>                    
            <select class="form-control" id="sel1">
              <option>50%</option>
              <option>60%</option>
              <option>65%</option>
              <option>70%</option>
              <option>80%</option>
              <option>85%</option>
              <option>90%</option>
              <option>100%</option>
            </select>
          </td>
        </tr>
        <tr>
          <th>Progressivo</th>
          <td>
            <div class="centralizar">
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class=" row  col-md-4 ">
                <select class="form-control" id="sel1">
                  <option>25m</option>
                  <option>50m</option>
                  <option>75m</option>
                  <option>100m</option>
                  <option>125m</option>
                  <option>150m</option>
                  <option>200m</option>
                  <option>250m</option>
                  <option>300m</option>
                  <option>350m</option>
                  <option>400m</option>
                  <option>500m</option>
                  <option>600m</option>
                  <option>700m</option>
                  <option>800m</option>
                  <option>900m</option>
                  <option>1000m</option>
                  <option>1500m</option>
                </select>
              </div>
            </div>

          </td>
          <td><input  type="text" class="form-control" id="number"></td>
          <td>                    
            <select class="form-control" id="sel1">
              <option>50%</option>
              <option>60%</option>
              <option>65%</option>
              <option>70%</option>
              <option>80%</option>
              <option>85%</option>
              <option>90%</option>
              <option>100%</option>
            </select>
          </td>
        </tr>
        <tr>
          <th>Regenerativo</th>
          <td>
            <div class="centralizar">
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class="row  col-md-4">
                <select class="form-control" id="sel1">
                  <option>1x</option>
                  <option>2x</option>
                  <option>3x</option>
                  <option>4x</option>
                  <option>5x</option>
                  <option>6x</option>
                  <option>7x</option>
                  <option>8x</option>
                </select>
              </div>
              <div class=" row  col-md-4 ">
                <select class="form-control" id="sel1">
                  <option>25m</option>
                  <option>50m</option>
                  <option>75m</option>
                  <option>100m</option>
                  <option>125m</option>
                  <option>150m</option>
                  <option>200m</option>
                  <option>250m</option>
                  <option>300m</option>
                  <option>350m</option>
                  <option>400m</option>
                  <option>500m</option>
                  <option>600m</option>
                  <option>700m</option>
                  <option>800m</option>
                  <option>900m</option>
                  <option>1000m</option>
                  <option>1500m</option>
                </select>
              </div>
            </div>

          </td>
          <td><input  type="text" class="form-control" id="number"></td>
          <td>                    
            <select class="form-control" id="sel1">
              <option>50%</option>
              <option>60%</option>
              <option>65%</option>
              <option>70%</option>
              <option>80%</option>
              <option>85%</option>
              <option>90%</option>
              <option>100%</option>
            </select>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

I need that at the end of the table the last TR is the total width of the table (col-xs-8 col-sm-8 col-md-8 col-lg-8) and that has a text field, I’ve tried several ways but I’m not able to do it.

Edit1: The table in code is in the following structure: I would like to insert a new row at the end of the table, that row should have the maximum width of the table in this way: And finally on that last line put a text field with the same width of that line.

make a demonstration in drawing of what you want to do, or explain otherwise, can not understand right what you want to do

– AnthraxisBR

2017/11/18 at 16:36
One moment, I’ll draw here

– user73316

2017/11/18 at 16:42

1 answer

Browser other questions tagged html css bootstrap-3

You are not signed in. Login or sign up in order to post.

by Bruno Vasconcelos • 81 points · Answer 1 · 2017-11-18T17:35:52+00:00

Hi, you made the whole table with 4 cells in each row. What you can do is concatenate the 4 cells at the end with the colspan="number of cells" (which in your case is 4)

        <div class="row">
            <tr>
                <td colspan="4">
                    <div class="centralizar">
                        <input type="text" class="form-control" id="seuID">
                    </div>
                </td>
            </tr>
        </div>

This way, you will have a text field of table width

Complete code:

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8  col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
        <h3 class=" text-center">Treino 1 para o aluno: Y</h3>
        <table class="table table-striped table-bordered">
          <thead>
            <tr>
              <th class="text-center">Exercício</th>
              <th class="text-center">Distancia</th>
              <th class="text-center">Intervalo</th>
              <th class="text-center">%esf</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>Aquecimento</th>
              <td class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <div class="centralizar">
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class=" row  col-md-4 ">
                    <select class="form-control" id="sel1">
                      <option>25m</option>
                      <option>50m</option>
                      <option>75m</option>
                      <option>100m</option>
                      <option>125m</option>
                      <option>150m</option>
                      <option>200m</option>
                      <option>250m</option>
                      <option>300m</option>
                      <option>350m</option>
                      <option>400m</option>
                      <option>500m</option>
                      <option>600m</option>
                      <option>700m</option>
                      <option>800m</option>
                      <option>900m</option>
                      <option>1000m</option>
                      <option>1500m</option>
                    </select>
                  </div>
                </div>

              </td>
              <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><input  type="text" class="form-control" id="number"></td>
              <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <select class="form-control" id="sel1">
                  <option>50%</option>
                  <option>60%</option>
                  <option>65%</option>
                  <option>70%</option>
                  <option>80%</option>
                  <option>85%</option>
                  <option>90%</option>
                  <option>100%</option>
                </select>
              </td>
            </tr>
            <tr>
              <th>Alternado</th>
              <td>
                <div class="centralizar">
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class=" row  col-md-4 ">
                    <select class="form-control" id="sel1">
                      <option>25m</option>
                      <option>50m</option>
                      <option>75m</option>
                      <option>100m</option>
                      <option>125m</option>
                      <option>150m</option>
                      <option>200m</option>
                      <option>250m</option>
                      <option>300m</option>
                      <option>350m</option>
                      <option>400m</option>
                      <option>500m</option>
                      <option>600m</option>
                      <option>700m</option>
                      <option>800m</option>
                      <option>900m</option>
                      <option>1000m</option>
                      <option>1500m</option>
                    </select>
                  </div>
                </div>

              </td>
              <td><input  type="text" class="form-control" id="number"></td>
              <td>                    
                <select class="form-control" id="sel1">
                  <option>50%</option>
                  <option>60%</option>
                  <option>65%</option>
                  <option>70%</option>
                  <option>80%</option>
                  <option>85%</option>
                  <option>90%</option>
                  <option>100%</option>
                </select>
              </td>
            </tr>
            <tr>
              <th>Braços</th>
              <td>
                <div class="centralizar">
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class=" row  col-md-4 ">
                    <select class="form-control" id="sel1">
                      <option>25m</option>
                      <option>50m</option>
                      <option>75m</option>
                      <option>100m</option>
                      <option>125m</option>
                      <option>150m</option>
                      <option>200m</option>
                      <option>250m</option>
                      <option>300m</option>
                      <option>350m</option>
                      <option>400m</option>
                      <option>500m</option>
                      <option>600m</option>
                      <option>700m</option>
                      <option>800m</option>
                      <option>900m</option>
                      <option>1000m</option>
                      <option>1500m</option>
                    </select>
                  </div>
                </div>

              </td>
              <td><input  type="text" class="form-control" id="number"></td>
              <td>                    
                <select class="form-control" id="sel1">
                  <option>50%</option>
                  <option>60%</option>
                  <option>65%</option>
                  <option>70%</option>
                  <option>80%</option>
                  <option>85%</option>
                  <option>90%</option>
                  <option>100%</option>
                </select>
              </td>
            </tr>
            <tr>
              <th>Resistência</th>
              <td>
                <div class="centralizar">
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class=" row  col-md-4 ">
                    <select class="form-control" id="sel1">
                      <option>25m</option>
                      <option>50m</option>
                      <option>75m</option>
                      <option>100m</option>
                      <option>125m</option>
                      <option>150m</option>
                      <option>200m</option>
                      <option>250m</option>
                      <option>300m</option>
                      <option>350m</option>
                      <option>400m</option>
                      <option>500m</option>
                      <option>600m</option>
                      <option>700m</option>
                      <option>800m</option>
                      <option>900m</option>
                      <option>1000m</option>
                      <option>1500m</option>
                    </select>
                  </div>
                </div>

              </td>
              <td><input  type="text" class="form-control" id="number"></td>
              <td>                    
                <select class="form-control" id="sel1">
                  <option>50%</option>
                  <option>60%</option>
                  <option>65%</option>
                  <option>70%</option>
                  <option>80%</option>
                  <option>85%</option>
                  <option>90%</option>
                  <option>100%</option>
                </select>
              </td>
            </tr>
            <tr>
              <th>Pernas</th>
              <td>
                <div class="centralizar">
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class=" row  col-md-4 ">
                    <select class="form-control" id="sel1">
                      <option>25m</option>
                      <option>50m</option>
                      <option>75m</option>
                      <option>100m</option>
                      <option>125m</option>
                      <option>150m</option>
                      <option>200m</option>
                      <option>250m</option>
                      <option>300m</option>
                      <option>350m</option>
                      <option>400m</option>
                      <option>500m</option>
                      <option>600m</option>
                      <option>700m</option>
                      <option>800m</option>
                      <option>900m</option>
                      <option>1000m</option>
                      <option>1500m</option>
                    </select>
                  </div>
                </div>

              </td>
              <td><input  type="text" class="form-control" id="number"></td>
              <td>                    
                <select class="form-control" id="sel1">
                  <option>50%</option>
                  <option>60%</option>
                  <option>65%</option>
                  <option>70%</option>
                  <option>80%</option>
                  <option>85%</option>
                  <option>90%</option>
                  <option>100%</option>
                </select>
              </td>
            </tr>
            <tr>
              <th>Educativo</th>
              <td>
                <div class="centralizar">
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class=" row  col-md-4 ">
                    <select class="form-control" id="sel1">
                      <option>25m</option>
                      <option>50m</option>
                      <option>75m</option>
                      <option>100m</option>
                      <option>125m</option>
                      <option>150m</option>
                      <option>200m</option>
                      <option>250m</option>
                      <option>300m</option>
                      <option>350m</option>
                      <option>400m</option>
                      <option>500m</option>
                      <option>600m</option>
                      <option>700m</option>
                      <option>800m</option>
                      <option>900m</option>
                      <option>1000m</option>
                      <option>1500m</option>
                    </select>
                  </div>
                </div>

              </td>
              <td><input  type="text" class="form-control" id="number"></td>
              <td>                    
                <select class="form-control" id="sel1">
                  <option>50%</option>
                  <option>60%</option>
                  <option>65%</option>
                  <option>70%</option>
                  <option>80%</option>
                  <option>85%</option>
                  <option>90%</option>
                  <option>100%</option>
                </select>
              </td>
            </tr>
            <tr>
              <th>Progressivo</th>
              <td>
                <div class="centralizar">
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class=" row  col-md-4 ">
                    <select class="form-control" id="sel1">
                      <option>25m</option>
                      <option>50m</option>
                      <option>75m</option>
                      <option>100m</option>
                      <option>125m</option>
                      <option>150m</option>
                      <option>200m</option>
                      <option>250m</option>
                      <option>300m</option>
                      <option>350m</option>
                      <option>400m</option>
                      <option>500m</option>
                      <option>600m</option>
                      <option>700m</option>
                      <option>800m</option>
                      <option>900m</option>
                      <option>1000m</option>
                      <option>1500m</option>
                    </select>
                  </div>
                </div>

              </td>
              <td><input  type="text" class="form-control" id="number"></td>
              <td>                    
                <select class="form-control" id="sel1">
                  <option>50%</option>
                  <option>60%</option>
                  <option>65%</option>
                  <option>70%</option>
                  <option>80%</option>
                  <option>85%</option>
                  <option>90%</option>
                  <option>100%</option>
                </select>
              </td>
            </tr>
            <tr>
              <th>Regenerativo</th>
              <td>
                <div class="centralizar">
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class="row  col-md-4">
                    <select class="form-control" id="sel1">
                      <option>1x</option>
                      <option>2x</option>
                      <option>3x</option>
                      <option>4x</option>
                      <option>5x</option>
                      <option>6x</option>
                      <option>7x</option>
                      <option>8x</option>
                    </select>
                  </div>
                  <div class=" row  col-md-4 ">
                    <select class="form-control" id="sel1">
                      <option>25m</option>
                      <option>50m</option>
                      <option>75m</option>
                      <option>100m</option>
                      <option>125m</option>
                      <option>150m</option>
                      <option>200m</option>
                      <option>250m</option>
                      <option>300m</option>
                      <option>350m</option>
                      <option>400m</option>
                      <option>500m</option>
                      <option>600m</option>
                      <option>700m</option>
                      <option>800m</option>
                      <option>900m</option>
                      <option>1000m</option>
                      <option>1500m</option>
                    </select>
                  </div>
                </div>

              </td>
              <td><input  type="text" class="form-control" id="number"></td>
              <td>                    
                <select class="form-control" id="sel1">
                  <option>50%</option>
                  <option>60%</option>
                  <option>65%</option>
                  <option>70%</option>
                  <option>80%</option>
                  <option>85%</option>
                  <option>90%</option>
                  <option>100%</option>
                </select>
              </td>
            </tr>
            <div class="row">
            <tr>
                <td colspan="4">
                    <div class="centralizar">
                        <input type="text" class="form-control" id="seuID">
                    </div>
                </td>
            </tr>
            </div>
          </tbody>
        </table>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>

I hope I helped :D