[SalesForce] CSS styling for jquery DataTables – can’t seem to make padding go away

I am new to styling and CSS, java, all that.. I've made a jquery datatable and am attempting it to style it to my requirements. There is cell spacing or padding that is not going away no matter what I try. What am I doing wrong?

Here is my code, and a screenshot indicating the spacing issue. 

<apex:page standardController="Account" standardstylesheets="true" applyhtmltag="true" showHeader="false">
  <link rel="stylesheet" type="text/css" src="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.css"></link>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>

<head>
 <style type="text/CSS">
body{
            font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;         
        }

        .center{
            text-align:center;
        }

        .table-bordered {
            border: 1px solid #E8E8E8;
            border-collapse : collapse; 
            font-size : .7em;
        }


       thead>tr>th {
            vertical-align: bottom;
            border: 1px solid #888888;
            border-spacing: 0;
            text-align:center;
            border-collapse: collapse;
            background : #A8A8A8;
            color:white;
        }

        td {
            vertical-align: bottom;
            border: 1px solid #E8E8E8;
            border-spacing: 0;
            border-collapse: collapse;
            text-align:center;
        }

        .header>td{
            font-weight:bold;
            background : #c4c4c4;               
        }

    </style>
</head>

<table id="opps">
    <thead>
        <tr>
            <th>Year</th>
            <th>Description</th>
            <th>#</th>
            <th>Jan</th>
            <th>#</th>
            <th>Feb</th>
            <th>#</th>
            <th>Mar</th>
            <th>#</th>
            <th>Apr</th>
            <th>#</th>
            <th>May</th>
            <th>#</th>
            <th>Jun</th>
            <th>#</th>
            <th>Jul</th>
            <th>#</th>
            <th>Aug</th>
            <th>#</th>
            <th>Sep</th>
            <th>#</th>
            <th>Oct</th>
            <th>#</th>
            <th>Nov</th>
            <th>#</th>
            <th>Dec</th>
            <th>Total #</th>
            <th>Total $</th>
        </tr>
    </thead>
    <tbody>
        <apex:repeat value="{!Account.Opportunities}" var="o">
        <apex:outputPanel rendered="{!o.IsClosed}">
            <tr>
                <td><apex:outputText value="{0,date,yyyy}"><apex:param value="{!o.CloseDate}" /></apex:outputText></td>
                <td><apex:outputField value="{!o.Desc__c}"/></td>
                <td><apex:outputField value="{!o.Jantix__c}"/></td>
                <td><apex:outputField value="{!o.Jan__c}"/></td>
                <td><apex:outputField value="{!o.Febtix__c}"/></td>
                <td><apex:outputField value="{!o.Feb__c}"/></td>
                <td><apex:outputField value="{!o.Martix__c}"/></td>
                <td><apex:outputField value="{!o.Mar__c}"/></td>
                <td><apex:outputField value="{!o.Aprtix__c}"/></td>
                <td><apex:outputField value="{!o.Apr__c}"/></td>
                <td><apex:outputField value="{!o.Maytix__c}"/></td>
                <td><apex:outputField value="{!o.May__c}"/></td>
                <td><apex:outputField value="{!o.Juntix__c}"/></td>
                <td><apex:outputField value="{!o.Jun__c}"/></td>
                <td><apex:outputField value="{!o.Jultix__c}"/></td>
                <td><apex:outputField value="{!o.Jul__c}"/></td>
                <td><apex:outputField value="{!o.Augtix__c}"/></td>
                <td><apex:outputField value="{!o.Aug__c}"/></td>
                <td><apex:outputField value="{!o.Septix__c}"/></td>
                <td><apex:outputField value="{!o.Sep__c}"/></td>
                <td><apex:outputField value="{!o.Octtix__c}"/></td>
                <td><apex:outputField value="{!o.Oct__c}"/></td>
                <td><apex:outputField value="{!o.Novtix__c}"/></td>
                <td><apex:outputField value="{!o.Nov__c}"/></td>
                <td><apex:outputField value="{!o.Dectix__c}"/></td>
                <td><apex:outputField value="{!o.Dec__c}"/></td>
                <td><apex:outputField value="{!o.TixSum__c}"/></td>
                <td><apex:outputField value="{!o.Sum__c}"/></td>

            </tr>
           </apex:outputpanel>
        </apex:repeat>
    </tbody>
</table>

<script>
// Enhance the plain table with jQuery DataTables plugin, sorted by year column descending.
$(document).ready(function(){
table.dataTable {
    $('#opps').dataTable({
        'order': [0,'desc'],
        'paging' : false,
        'searching' : false
     });
});
</script>
  <apex:outputText style="font-style:italic" value="Legend: # = Amount of Tickets sold for that month"/>
</apex:page>

sales data table

If i change standardstylesheets="false" it uses the fonts defined in font-family (i believe?) but still has the padding. I've tried changing various parameters from the border-collapse and border-spacing …
I've also tried adding !important on those lines.
what am I missing? Any help would be appreciated.
Disregard – I fixed it, added as solution.

Best Answer

This was solved by adding : 

#opps {
  border-collapse:collapse;
}

within my style section

Related Topic