Hello Everyone,

I'm having a real hard time styling an apex:pageBlockTable. I have a series of four columns containing fields from a custom object, and then another field containing a long description that I position underneath the previous fields using breakbefore="true" . I am spreading this field to the whole length of the row using colspan="4". The problem is that the lines betweens the columns and rows are behaving strangely and I can find no way of altering them. My ideal result would be for the rows to be clearly identifiable as "belonging to each other", placing borders between "pairs" of rows for example.

To illustrate the problem, I have built up a similar example using the contact object instead of my custom object. 

Page Code

<apex:page controller="StylePageBlockTableController">
    <apex:pageBlock >
        <apex:pageBlockTable value="{!allContacts}" var="contact">
            <apex:column value="{!contact.Name}" headervalue="Full Name"/>
            <apex:column value="{!contact.Title}" headervalue="Title"/>
            <apex:column value="{!contact.Department}" headervalue="Department"/>
            <apex:column value="{!contact.Phone}" headervalue="Phone"/>
            <apex:column value="{!contact.Email}" breakBefore="true" colspan="4"/>
        </apex:pageBlockTable>
    </apex:pageBlock>         
</apex:page>

Controller Code

public class StylePageBlockTableController {
    
    public List<Contact> getAllContacts(){
        return [select Name, Title, Department, Email, Phone from Contact limit 5 ];
    }
}

Here is a screenshot of the table, as I have highlighted, there is a random "missing border line" that always appears (or rather doesn't) at exactly half way down the table. No matter what the size of the table, this missing line is always in the middle.

I have tried using style classes and the rules attribute (which seems utterly redundant and does not seem to affect anything, perhaps the new SF styling??)  amongst others. Any ideas anyone, greatly appreciated!