Jquery datatable - Table header and columns width mismatching

Question

I'm looking for help jquery data-tables header and columns width size mismatching. i mean columns size is varying based on the text lenght(datatable values).How to fix the columns should be standard width and match with tale header.

Another issue is pagination.I'm looking pagination style like Example of pagination , but i'm not getting same style in my table.Please help me.

And another request for apply same theme which given example (theme redmond) to datatable.

Please find the below my datatable in jsfiddle JSFIDDLE

$("#products1").dataTable({
       "aaData": newarray,
       "bProcessing": true,
       "bDeferRender": true,
       "bFilter": false,
       "bJQueryUI": true,
       "sPaginationType": "full_numbers",
       "bRetrieve": true,
       "bPaginate": true,
       "bSort": true,
       "aaSorting": [[4, "desc"]],
       "iDisplayLength": 5,
       "oLanguage":{
                "sInfo":"_START_-_END_ of _TOTAL_",
                "oPaginate":{
                    "sFirst": "<<",
                    "sLast": ">>",
                    "sNext": ">",
                    "sPrevious": "<" 
                },
                "sLengthMenu":"Show _MENU_"
            },
       "aoColumns": [{"sWidth": "100%","sClass": "center","bSortable": false},
             {
            "sWidth": "150%","sClass": "center","bSortable": false},
             {
            "sWidth": "150%","sClass": "center","bSortable": false},
             {
            "sWidth": "150%","sClass": "center","bSortable": false}


            ],
        "aoColumnDefs": [{ "fnRender": function (o, val) {
            return o.aData[0];
        },
            "sClass": "HEADER","aTargets": [0]
    }, {
        "fnRender": function (o, val) {

            return o.aData[1];
        },
            "sClass": "list","aTargets": [1]
    }, {
    "fnRender": function (o, val) {

            return o.aData[2];
        },
            "sClass": " Number","aTargets": [2]
    },{
    "fnRender": function (o, val) {

            return o.aData[3];
        },
            "sClass": "Name","aTargets": [3]
    }]

});

Answer 1

You need to put this in table for fixed size column

EDIT: You missed to write table width and layout in style of table, I hope following will work for you

<table border="1" cellspacing="0" cellpadding="0" id="products" style="clear:both;layout:fixed;width:400px;">
    <col style="width: 40%"/>
        <col style="width: 30%"/>
        <col style="width: 10%"/>
        <col style="width:20%"/>

Check update updated fiddle