jquery: Adjust Table Column's Width

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            /* start Datatable */
            var oTable = $('#example').dataTable({

                "bAutoWidth": false,
                "aoColumnDefs": [
               { "sWidth": "50%", "aTargets": [0] },
              { "sWidth": "15%", "aTargets": [1] },
                 { "sWidth": "35%", "aTargets": [2] }
]
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="example">
            <thead>
                <tr>
                    <th> Rendering engine </th>
                    <th> Browser </th>
                    <th> CSS grade </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> Gecko </td>
                    <td>Firefox 1.0 </td>
                    <td> A </td>
                </tr>
                <tr>
                    <td> Gecko </td>
                    <td> Firefox 1.5 </td>
                    <td> A </td>
                </tr>
                <tr>
                    <td> Gecko </td>
                    <td> Firefox 2.0 </td>
                    <td> A </td>
                </tr>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>

Comments

Popular posts from this blog

C# Copy files from one server to another

Export SharePoint Online Group Users to Excel using Powershell