如何使表内的输入响应？

Question

我正在对一个表进行编码，当输入太大时，它会扩展表的宽度。当我使用表响应时，它只是创建一个滚动条（根据引导文档，这是正确的）。我需要以响应方式使输入宽度适合表宽度。我该怎么办？

插图

添加一行之前

添加一行后

代码：

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
    var actions = $("table td:last-child").html();
    var _id = 1;
    var data_submit = {}
    // Append table with add row form on add new button click
    $(".add-new").click(function(){
        $(this).attr("disabled", "disabled");
        var index = $("table tbody tr:last-child").index();
        var row = '<tr data-id="' + _id + '">' +
            '<td><input type="text" style="" class="form-control" name="descricao" id="descricao"></td>' +
            '<td><input type="text" style="" class="form-control" name="minimo" id="minimo"></td>' +
            '<td><input type="text" style="" class="form-control" name="desejavel" id="desejavel"></td>' +
            '<td>' + actions + '</td>' +
            '</tr>';
        $("table").append(row);
        $("table tbody tr").eq(index + 1).find(".add, .edit").show();
        $('[data-toggle="tooltip"]').tooltip();
        _id += 1;
    });
    // Add row on add button click
    $(document).on("click", ".add", function(){
        var empty = false;
        // console.log('cheguei')
        var input = $(this).parents("tr").find('input[type="text"]');

        input.each(function(){
            if(!$(this).val()){
                $(this).addClass("error");
                empty = true;
            } else{
                $(this).removeClass("error");
            }
        });
        $(this).parents("tr").find(".error").first().focus();
        var _data_submit = [];
        if(!empty){
            input.each(function(){
                _data_submit.push($(this).val());
                $(this).parent("td").html($(this).val());
            });
            data_submit[$(this).parents("tr").attr('data-id')] = _data_submit;
            $(this).parents("tr").find(".add, .edit").show();
            $(".add-new").removeAttr("disabled");
            var data_exp = "";
            for(var i in data_submit) {
                data_exp += data_submit[i].toString() + "|";
            }
            $("#dt-experiencias").val(data_exp);
        }
    });
    // Edit row on edit button click
    $(document).on("click", ".edit", function(){
        $(this).parents("tr").find("td:not(:last-child)").each(function(){
            $(this).html('<input type="text" class="form-control" value="' + $(this).text() + '">');
        });
        $(this).parents("tr").find(".add, .edit").show();
        $(".add-new").attr("disabled", "disabled");
    });
    // Delete row on delete button click
    $(document).on("click", ".delete", function(){
        delete data_submit[$(this).parents("tr").attr('data-id')];
        var data_exp = "";
        for(var i in data_submit) {
            data_exp += data_submit[i].toString() + "|";
        }
        $("#dt-experiencias").val(data_exp);
        $(this).parents("tr").remove();
        $(".add-new").removeAttr("disabled");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />

<div class="table-responsive">
  <button type="button" class="btn btn-info add-new pull-right"><i class="fa fa-plus"></i> Add</button>
  <table class="table table-bordered table-striped" width="100%">
    <thead>
      <tr>
        <th>Descrição</th>
        <th>Mínimo</th>
        <th>Desejável</th>
        <th>Ações</th>
      </tr>
    </thead>
    <tbody>
      <tr data-id="0" style="display: none;" width="100%">
        <td required>teste descrição</td>
        <td required>teste edit</td>
        <td required>teste delete</td>
        <td>
          <a class="add" data-toggle="tooltip"><i class="fa fa-lg fa-plus-square"></i></a>
          <a class="edit" data-toggle="tooltip"><i class="fa fa-lg fa-pencil-square"></i></a>
          <a class="delete" data-toggle="tooltip"><i class="fa fa-lg fa-trash-o"></i></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>