1

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.

  • it would be a better idea if you post this question in datatables support as well. But they would ask you for a link where they want to see the actual issue. – Bforce Jun 18 '14 at 17:44
  • What padding are you referring to? Its difficult to tell from the image you posted. Are you talking about surrounding your table? If so, you might want to try "nesting" your "Legend" in another table between Div tags with the other table. Either that or include it in a footer as part of the data table to solve your problem. I think that's why you're seeing the border appear. – crmprogdev Jun 18 '14 at 20:15
  • Hi there crmprogdev - I tried removing the legend just to see if it makes a difference - It doesn't - I am talking about there is spacing inbetween every cell. It is difficult to see as it is a shrunken image but if you right click and select 'open image in new tab' it will show the full size image which will better display the issue. – Ryan T Jun 19 '14 at 15:10
0

This was solved by adding :

#opps {
  border-collapse:collapse;
}

within my style section

0

This sounds like an issue with css specificity, some style that specifies padding is winning over your style saying no padding. You can use chrome debugger to see the element's computed style, and the exact rule causing the padding to appear.

ref: http://css-tricks.com/specifics-on-css-specificity/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.