Applying style to table in javascript

Question

I have a table

   <div class="container-fluid" style="margin-left: -29px; margin-right: -29px">
        <!--Striped Rows-->
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card-panel" style="margin-top: -29px; ">
                    <div class="body table-responsive">
                       <table id="main_grid" class="table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

I am dynamically loading it through the result of an AJAX:

 var myData = result
            for (var i = 0; i < myData.length; i++) {
                var obj = myData[i];

                rows += "<tr>";
                rows += "<th>Id</th>";
                rows += "<th>Nome</th>";
                rows += "</tr>";
                rows += "<tr>";
                //rows += " <th><img src=" + "../images/arrow_right.png" + ">" + obj.id + "</th>";
                rows += " <th>" + obj.id + "</>";
                rows += " <th>" + obj.nome + "</th>";
                rows += "</tr>";
            }

And trying to apply the style:

 <style>
        table {
            max-width: 140px;
        }

        td {
            width: 35px;
        }
    </style>

But it doesn’t work, as I must to load the style?

Answer 1

I think it is because after th (table title) you have to use the td ( standard cell) that you are calling in the style. And there’s a tag closure that you didn’t put:

rows += "<tr>";
            //rows += " <td><img src=" + "../images/arrow_right.png" + ">" + obj.id + "</td>";
            rows += " <td>" + obj.id + "</td>";
            rows += " <td>" + obj.nome + "</td>";
            rows += "</tr>";