<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2 class="text-center">Dynamic protocol table</h2> <div class="row"> <div class="col-12"> <table class="table table-protocol table-bordered"> <tbody> <tr> <td class="p-0">Название параметра</td> <td class="p-0"> <input class="form-control" id="p1" value="" placeholder="Одна строка"> </td> </tr> <tr> <td class="p-0">Название параметра</td> <td class="p-0"> <div class="input-group"> <input type="text" class="form-control" placeholder="Одна строка с возможностью выбора"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> Выбрать </button> </div> </div> </td> </tr> <tr> <td class="p-0">Название параметра</td> <td class="p-0"> <div class="input-group"> <input readonly type="text" class="form-control" placeholder="Возможность выбора без ввода"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> Выбрать </button> </div> </div> </td> </tr> <tr> <td class="p-0">Название параметра</td> <td class="p-0"> <div class="input-group"> <textarea class="form-control" placeholder="Много строк без выбора"></textarea> </div> </td> </tr> <tr> <td class="p-0">Название параметра</td> <td class="p-0"> <div class="input-group"> <textarea class="form-control" placeholder="Много строк c выбором"></textarea> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> Выбрать </button> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div>

.table-protocol .form-control { border-radius: 0; } .table-protocol .input-group-append>.btn { border-radius: 0; }