Bootstrap 4 responsive table within a table

by Rodrigo Portillo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-table">
  <div class="container-table-row">
    <div class="container-table-cell">
      <table id="minha_tabela" class="table table-responsive">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Data de Algo</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Ação</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Table cell</td>
            <td>20/02/2010</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td><button class="editar">
            Editar
            </button></td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Table cell</td>
            <td>24/04/2014</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td><button class="editar">
            Editar
            </button></td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Table cell</td>
            <td>22/08/2011</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td><button class="editar">
            Editar
            </button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" id="meuModal">
  <div class="modal-dialog" role="document">
    <div...

CSS

.container-table {
  display: table;
}

.container-table-row {
  display: table-row;
}

.container-table-cell {
  display: table-cell;
}

JavaScript

$("#minha_tabela tr").each( function(){
	$(this).find("button.editar").on("click", function(evt){
    evt.stopPropagation();
    var curr_data = $(this).closest("tr").find("td:nth-child(3)").text();
    $("#meuModal #data").val(curr_data.split("/").reverse().join("-").replace(/ /g, ""));
    
  	$('#meuModal').modal('show');
    console.log($(this).closest("tr").hasClass("locked"));
    if ($(this).closest("tr").hasClass("locked")) {
    	$("#meuModal input").attr("disabled", true);
			$("#meuModal .lockar").attr("disabled", true);
    } else{
    	$("#meuModal input").removeAttr("disabled");
      $("#meuModal .lockar").removeAttr("disabled");
    }
    
    var c_line = $(this).closest("tr");
    
    $("#meuModal .lockar").unbind();
    $("#meuModal .lockar").click(function(){
    	$(c_line).addClass("locked");
      
      $(this).attr("disabled", true);
      $("#meuModal input").attr("disabled", true);
    });
  })
});
$('#meuModal').on('shown.bs.modal', function () {
    $('#meuModal input').trigger('focus');
});