How to increase the width of table columns and adjust the width of the Javascript modal window

Question

I need to adjust two things in a Modal Bootstap/javascript window:

1 - The width and height of the modal window; 2 - Table column names are breaking to a new row and deforming the appearance. I need to make each column fit according to the names.

Someone would know how to help me?

<div class="modal fade" data-backdrop="static" id="pessoaHistory" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Histórico de Alterações</h4>
            </div>
            <div class="modal-body scoll-tree" style="overflow-x: auto;">
                <p id="pessoaHistoryData"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

@section scripts
    {
    <script type="text/javascript">
        $(".remove-row").on("click", function () {
            var pessoaId = $(this).data('id');
            $.ajax({
                url: "/pessoa-gerenciamento/pessoa-historico/" + pessoaId,
                type: "GET",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                cache: false
            }).done(function (data) {
                console.log(data);
                var formatHtml = "<table class='table table-striped'>";
                formatHtml += "<thead><th>Ação</th><th>Quando</th><th>Código</th><th>Natureza</th><th>Nome/Razão Social</th><th>Apelido/Nome Fantasia</th><th>Nascimento/Abertura</th><th>Sexo</th><th>Estado Civil</th><th>Pelo Usuário</th></thead>";

                for (var i = 0; i < data.length; i++) {
                    var change = data[i];
                    formatHtml += "<tr>";
                    formatHtml += "<td>" + change.acao + "</td>";
                    formatHtml += "<td>" + change.quando + "</td>";
                    formatHtml += "<td>" + change.id + "</td>";
                    formatHtml += "<td>" + change.natureza + "</td>";
                    formatHtml += "<td>" + change.nomeCompletoRazaoSocial + "</td>";
                    formatHtml += "<td>" + change.apelidoNomeFantasia + "</td>";
                    formatHtml += "<td>" + change.nascimentoAbertura + "</td>";
                    formatHtml += "<td>" + change.sexo + "</td>";
                    formatHtml += "<td>" + change.estadoCivil + "</td>";
                    formatHtml += "<td>" + change.quem + "</td>";
                    formatHtml += "</tr>";
                }
                formatHtml += "</table>";
                $("#pessoaHistoryData").html(formatHtml);
            });
        });
    </script>

Answer 1

To increase the size of the Bootstrap modal, you can normally use css, for example:

In the code below, look at the class I entered in the second DIV

<div class="modal fade" tabindex="-1">
 <div class="modal-dialog bigModal"> //ATENÇÃO À CLASSE bigModal
  <div class="modal-content">
    <div class="modal-header">
      seu header aqui
    </div>
    <div class="modal-body">
          seu body aqui
    </div>
    <div class="modal-footer">
      seu footer aqui
    </div>
  </div>
 </div>
</div>

And then you add the bigModal class in a css file:

.bigModal{
   width: 85%
   height: 500px;
}

Or you can use the style 'in-line':

...

<div class="modal-dialog" style="width: 85%; height: 500px;">

...

But anyway I strongly recommend that you do it in a separate css sheet to facilitate the maintenance of the code

On the columns, Bootstrap itself already tidies their width according to their content. When you increase the width of the modal as a whole, I believe your problem will be solved

I hope I helped, a hug