CSS class in jquery

[bakhtawar_ashiq]

I want to apply a CSS class to a gridview. I tried to apply this style reference link, so I try this

     success: function (result) {
         var final = JSON.parse(result.d).response;
         console.log(JSON.parse(result.d).response)
         $("#tabledata").empty();
         if (final.length > 0) {
             $("#tabledata").append(
        "<tr ><th>ID</th><th>OwnerName</th></tr>");
             for (var i = 0; i < final.length; i++) {
                 if (final[i] !== null) {
                     $("#tabledata").append("<tr><td>" +
                    final[i][0] + "</td> <td>" +
                    final[i][1] + "</td> <td>" +
                 }
             }
         }
         else {
             $("#tabledata").hide();
             $("#Label4").text("No Data");
         }
     },
     error: function (error) {
         alert("error");

     }
 });
 }

but when i build then there is no effect in grid view

And gridview in html

 <table id="tabledata">
   </table>

When i apply this then gridview is display with simple where as i want to apply this css in gridview when i apply this then gridview display without formatting… what i try

what i want

what i want

So how i apply css ?? any solution?

[markbrown4]

@bakhtawar_ashiq

So how i apply css

Give the table a class and put your styles in the css

<table id="tabledata" class="grid"></table>

.table.grid {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
.table.grid th { background: #ccc }
.table.grid td {  }

[m3g4p0p]

… or simply via the ID like

#tabledata {
  /* styles here */
}

although some people don’t like to use ID selectors for styling.

[Paul_Wilkins]

@m3g4p0p

although some people don’t like to use ID selectors for styling.

The problem with id selectors is that they are notoriously difficult when it comes to specificity, resulting in crazy selectors just to achieve anything. When an id selector is being used, no class selector is capable of modifying it, so you end up with a lot more complications.

For more on this, see Don’t use IDs in CSS selectors.