[SalesForce] How to remove the grey border

I have VF page and a button, on click of the button vf page is rendered as pdf. The data is completely clean but I am facing problem with css of the pdf. I have created a table that displays some details in the pdf but the table is show with some grey border. Please tell me how to remove those borders. I have attached the screen shot for reference

I have tried different ways like border:0; / border-sytle:solid like this but still its not working

apex: dataTable value = "{!OrdreItemDetails}"
var = "orderItms"
align = "Center"
width = "100%"
id = "OrderData"
border = "1"
style = "border-width:1;cellspacing:1;cellpadding:1;" >
    < apex: column style = "font-family:Calibri;font-size:15px;border-style:solid;border-collapse:collapse;border-width:1;cellspacing:1;cellpadding:1;" >
    < apex: facet name = "header" > < div > Product / Service Description < /div></apex: facet >
    < apex: outputText value = "{!orderItms.Product_Name__c}"
style = "font-family:Calibri;font-size:15px;" / >
    < /apex:column> < apex: column style = "font-family:Calibri;font-size:15px;border-style:solid;border-collapse:collapse;border-width:1;cellspacing:1;cellpadding:1;" >
    < apex: facet name = "header" > < div > Quantity < /div></apex: facet >
    < div align = "right" >
    < apex: outputText value = "{0,Number,###,###,##0}"
style = "font-family:Calibri;font-size:15px;" >
    < apex: param value = "{!orderItms.Quantity}" / >
    < /apex:outputText> < /div> < /apex:column> < Apex: Column style = "font-family:Calibri;font-size:15px;border-style:solid;border-collapse:collapse;border-width:1;cellspacing:1;cellpadding:1;" >
    < apex: facet name = "header" > < div > Unit Cost < /div></apex: facet >
    < div align = "right" >
    < apex: outputText value = "{0,Number,###,###,##0.00}"
style = "font-family:Calibri;font-size:15px; text-align:right;" > {
        !currencyCode
    } < apex: param value = "{!orderItms.unitprice}" / >
    < /apex:outputText> < /div> < /apex:column> < apex: column style = "font-family:Calibri;font-size:15px;border-style:solid;border-collapse:collapse;text-align:right;border-width:1;cellspacing:1;cellpadding:1;" >
    < apex: facet name = "header" > < div > Amount < /div></apex: facet >
    < div align = "right" >
    < apex: outputText value = "{0,Number,###,###,##0.00}"
style = "font-family:Calibri;font-size:15px; text-align:right;" > {
        !currencyCode
    } < apex: param value = "{!orderItms.Quantity*orderItms.unitprice}" / >
    < /apex:outputText> < /div> < /apex:column> < /apex:dataTable> < table width = "100%"
align = "center"
cellspacing = "0"
cellpadding = "0"
border = "0" >
    < th >
    < /th> < th >
    < table border = "1"
border - color = "black"
cellspacing = "0"
cellpadding = "0"
align = "right"
width = "36.4%"
border - style = "solid" >
    < tr align = "left"
border = "1"
border - style = "solid"
cellspacing = "0" >
    < td border = "None"
width = "4%" > < br / > < /td> < td border = "None"
width = "52%" > < br / > < /td> < /tr> < tr align = "left"
border = "1"
border - style = "solid"
cellspacing = "0"
cellpadding = "0" >
    < td border = "None"
width = "4%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
style = "font-weight:normal;font-family:Calibri;font-size:15px;" > Sub Total: < /td> < td border = "None"
width = "52%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
align = "right"
style = "font-weight:normal;font-family:Calibri;font-size:15px;" > {
    !currencyCode
} {
    !subTotal
} < /td> < /tr> < tr align = "left"
border = "1"
border - style = "solid"
cellspacing = "0"
cellpadding = "0" >
    < td border = "None"
width = "50%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
style = "font-family:Calibri;font-size:15px;font-weight:normal;" > VAT: < /td> < td border = "None"
width = "50%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
align = "right"
style = "font-weight:normal;font-family:Calibri;font-size:15px;" > {
    !currencyCode
} {
    !vatCharges
} < /td> < /tr> < tr align = "left"
border = "1"
border - style = "solid"
cellspacing = "0"
cellpadding = "0" >
    < td border = "None"
width = "50%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
style = "font-family:Calibri;font-size:15px;font-weight:normal;" > Credit Card Fee: < /td> < td border = "None"
width = "50%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
align = "right"
style = "font-weight:normal; font-family:Calibri;font-size:15;" > {
    !currencyCode
} {
    !creditCardCharges
} < /td> < /tr> < tr align = "left"
border = "1"
border - style = "solid"
cellspacing = "0"
cellpadding = "0" >
    < td border = "None"
width = "50%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
style = "font-family:Calibri;font-size:15px;font-weight:normal;" > Total: < /td> < td border = "None"
width = "50%"
cellspacing = "0"
cellpadding = "0"
border - style = "solid"
align = "right"
style = "font-weight:normal; font-family:Calibri;font-size:15px;" > {
    !currencyCode
} {
    !grandTotal
} < /td> < /tr> < /table> < /th> < /table>

I have used the Inline css for this, I know this is not a good practice but due to lack of time I have to use it inline