HI All,

I have a VF page where I am showing child records in VF page. I have a headline as parent and comment as a child object. Each time a coment is posted on a headline every comment ill be shown up in a new line. I am able to show the comment in  a VF page but not able to draw up the line between the comments. I am new to VF and learning on styling side. kindly help me out, MY VF page code is below...

=====
<apex:page controller="ContentsCalculation">
<apex:form >
 <apex:pageblock >
 
<style type = "text/css"> 
            .aDiff{font-size:20px;
                  color:Red;}
                  
     td
     {
        border-bottom: 1px solid #000;
     }  
   </style>
    
         <apex:outputText value="{!headlines.Name}" style="font-size:20px"/> <br></br>
             <apex:outputText value="{!headlines.CreatedDate}"> 

                </apex:outputText>
                <hr>
                </hr>
                <apex:outputText value="{!headlines.Contents__c}">
                </apex:outputText>
                <hr></hr>
                <apex:outputText value="RecentMessage" style="font-size:20px" styleClass=".aDiff"></apex:outputText>

  <br></br><p>
  <!--<input type ="text" id = "comment" min="1" max="1000" placeholder = "Add your comments here" styleClass = ".aDiff" value= "{!commentValue}" />-->
        <table>
           <tr><td> <apex:inputText value="{!commentValue}"/></td>
            <td><apex:commandButton action="{!saveComment}" value="Post" /> </td></tr>
              </table>
              </p>
     
     <apex:pageBlockSection >
       
      
      <table column="1">
      
         <tr column="1">  
          <apex:repeat var="list" value="{!CommentsData}">
           <apex:repeat var="p" value="{!list.Comments__r}">
                    <apex:outputPanel > <td column="1">
                      <hr>  
                          <apex:outputField value="{!p.Comment__c}" label="">
                             </apex:outputField><br/>
                     </hr>  
                   </td></apex:outputPanel>
              
            </apex:repeat>
          </apex:repeat>
       </tr>   
       </table>   
       
     </apex:pageBlockSection>         
    </apex:pageblock>          
    </apex:form>
</apex:page>


Controller:
================
public Class ContentsCalculation
{

    public List<Comments__c> saveComment1 { get; set; }
  public Headlines__c headlines{get;set;}
  public String commentValue{get;set;}
   public ContentsCalculation() {

        headlines = [select id,Name,Contents__c,CreatedDate from Headlines__c where Id = :ApexPages.currentPage().getParameters().get('id') ];
}

 public PageReference saveComment()
 {
   
    saveComment1 = new List<Comments__c>();
    System.Debug('****)Comment****'+commentValue);
    
 for(Headlines__c head :[select id from Headlines__c where ID = :headlines.id])
    {
    saveComment1.add(new Comments__c(Headline__c= head.id,Comment__c = commentValue,Name = commentvalue));
    
   }
   insert saveComment1;
   refreshData();
   return null;
 }
 
 public void refreshData()
 {
   commentValue = '';
 }
 
 public List<Headlines__c> getCommentsData()
 {
   List<Headlines__c> listOfComments = [select Id, Name,(Select Id,Comment__c from Comments__r ORDER BY CreatedDate DESC) from Headlines__c where ID = :headlines.id ];
    System.debug('**list of comments' +listOfComments);                        
   return listOfComments;
 
 }
 
}
=================


Kindly suggest some ideas to improve the look and feel .....

Thanks in advance..

Regards,
Rahul