How to create a table in VF page that will appear as standard table and can also be emailed as a pdf attachment?

Question

I wish to create a VF page that displays a table of data to users. If the user clicks on the 'Email' button on the VF page, the table of data should get emailed to the user in PDF format.

I implemented this requirement and found out that the PDF was not getting formatted properly. I learned that apex:pageBlock is not recommended to be used for PDF generation. More info here. Hence I created a similar-looking VF page using apex:dataTable. But I faced the same issue.

How do I create a VF page that looks like a standard table but also appears acceptable in an Email PDF attachment?

Also, CSS code gets added at the end of the PDF attachment. How do I remove it?

Thank You!

PDF Attachment Screenshot

Code

VF page Code

<apex:page controller="Profile_Controller" tabStyle="Account" contentType="{!IF( allowDownload = true, 'application/vnd.ms-excel#Ratesheet.xls', '')}">
    <apex:form id="copsform">
        <apex:pageBlock title="{!customerRec.Name} (MDM ID: {!customerRec.Master_Customer_ID__c})" rendered="{!RateListTable.size!=0}" >
            <apex:pageBlockButtons >                
                <apex:commandbutton id="button2" value="Email RateSheet" action="{!EmailRateSheet}" reRender="" rendered="{!RateListTable.size!=0}"/>                           
            </apex:pageBlockButtons>
        </apex:pageBlock> 
    </apex:form>
            
            <apex:dataTable value="{!RateListTable}" var="Rate" headerClass="theHead" styleClass="tableClass" width="550px" rendered="{!RateListTable.size!=0}">
                <apex:column styleClass="col">
                    <apex:facet name="header">MDM ID</apex:facet>
                    <apex:outputText >{!Rate.ProdMDMID}</apex:outputText>
                </apex:column>       
                <apex:column styleClass="col">
                    <apex:facet name="header">Product Name</apex:facet>
                    <apex:outputText >{!Rate.ProdName}</apex:outputText>
                </apex:column>  
                <apex:column styleClass="col">
                    <apex:facet name="header">Rate</apex:facet>
                    <apex:outputText >{!Rate.Rate}</apex:outputText>
                </apex:column>  
                <apex:column styleClass="col">
                    <apex:facet name="header">Delineation</apex:facet>
                    <apex:outputText >{!Rate.DelType}</apex:outputText>
                </apex:column>
                <apex:column styleClass="col">
                    <apex:facet name="header">From</apex:facet>
                    <apex:outputText >{!Rate.FromVal}</apex:outputText>
                </apex:column>
                <apex:column styleClass="col">
                    <apex:facet name="header">To</apex:facet>
                    <apex:outputText >{!Rate.To}</apex:outputText>
                </apex:column>
                <apex:column styleClass="col">
                    <apex:facet name="header">Delineation Value</apex:facet>
                    <apex:outputText >{!Rate.DelVal1}</apex:outputText>
                </apex:column>
                <apex:column styleClass="col">
                    <apex:facet name="header">Product Type</apex:facet>
                    <apex:outputText >{!Rate.ProdType}</apex:outputText>
                </apex:column>
                <apex:column styleClass="col">
                    <apex:facet name="header">Message</apex:facet>
                    <apex:outputText >{!Rate.Message}</apex:outputText>
                </apex:column>
            </apex:dataTable>

    <style>
    .tableClass {
       font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
        border: 1px solid #bbb;
    }
     .theHead {
      background-color: #F4F4F4;  
      border: 1px solid #bbb;
        text-align: left;
        padding: 4px;
     }
     .col, t2 {
      border: 1px solid #bbb;
        background-color: #FFFFFF; 
        text-align: left;
        padding: 4px;
     }
     h2 {
      font-size: 120%;
      margin-left: 10px;
      padding: 30px;
     }
    </style>
</apex:page>

Code that sends email

public PageReference sendEmailToUser() {
        PageReference rateProfile =  ApexPages.currentPage(); //get the current page reference
        rateProfile.setRedirect(true); //set the redirect property to true to avoid the page resubmission warning
        Messaging.EmailFileAttachment attachment = new Messaging.EmailFileAttachment(); //create attachment
        attachment.setFileName('RateProfile.pdf'); //set the file name of attachment
        attachment.setBody(rateProfile.getContentAsPDF()); //set the pdf version of the page in body of the attachment
        Messaging.SingleEmailMessage message = new Messaging.SingleEmailMessage(); //create SingleEmailMessage object
        message.setFileAttachments(new Messaging.EmailFileAttachment[] { attachment } ); //set the attachment to the email
        message.setSubject('Rate Profile'); //set subject of the email
        message.setPlainTextBody('The Rate Profile is attached with this email.'); //set body of the email
        message.setToAddresses( new String[] { UserInfo.getUserEmail() } ); //set the email address of the logged-in user as recipient address
        Messaging.sendEmail( new Messaging.SingleEmailMessage[] { message } ); //send the email
        return rateProfile; //return the page reference. If you return null, page resubmission warning will appear on refreshing the page.
    }

Answer 1

I used <apex:pageBlock> and added cellpadding and border to apex:pageBlockTable and it solved the issue.

The pdf got formatted properly.

Eg:<apex:pageBlockTable cellpadding="5px">