column width

suser

How to set width of columns i have column owner which has long text so when i click on sort table distrub with their position
means shrink

if (final.length > 0) {
                        $("#tabledata thead").append(
   "<tr><th>RabNo</th><th>Owner</th><th>Dadf Drvbrt Sawrt Balt</th><th>Daertr Pasdfegr Sawrt Balt</th></tr>");

                        for (var i = 0; i < final.length; i++) {

                            if (final[i] !== null) {
                                $("#tabledata tbody").append("<tr><td>" +
                                                   
                                                    final[i][0] + "</td> <td>" +
                                                    final[i][1] + "</td> <td>" +
                                                    final[i][2] + "</td> <td>" +
                                                    final[i][3] + "</td> <td>" +
                                                    final[i][4] + "</td></tr>");

                            }
                        }

                       
                    }


                    

                    else {
                        $("#tabledata").hide();

                        $("#<%=Label5.ClientID%>").text("No data");
                    }

HTML

 <table id="tabledata"   cellspacing="0"  class="table inner_table table-striped table-bordered alltables">

    <thead class="GridviewScrollHeader"></thead>
    <tbody></tbody>


   </table>



 .inner_table {
    width: 100%;
    border-collapse: collapse;
    overflow: auto;
    height: 300px;
    display: table-caption;
    font-size: 10px;
}
      .GridviewScrollHeader th, .GridviewScrollHeader td {
          padding: 5px;
          font-weight: bold;
          white-space: nowrap;
          border-right: 1px solid #AAAAAA;
          border-bottom: 1px solid #AAAAAA;
          background-color: #EFEFEF;
          text-align: left;
          vertical-align: bottom;
      }

and links which i add

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.3.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />

    <link href=" https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css" rel="stylesheet" />

 
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet" />



    <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
    <script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />



       <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Do you mean you want to truncate long text in the column? If so, have a look at this blog post.

Allan

suser

no.. means want to do set same width each column..

allan

I'm afraid I still don't understand. You want to set all columns to the same width? Use columns.width. Note that if the content is too large, the browser will overrule that and force the column's width.

Allan