It’s pretty simple to implement… Just add an empty span tag with a class name (<span class=”categoryheader”></span>) to the qListForm title display field where you want the divider line to appear as seen the in screen shot below.
Add a content editor webpart to your qListForm page and paste this code in the webpart
<style type="text/css">
.red, .red td{ border-bottom:4px solid black;}
.green, .green td{
background-color:yellow;
border-bottom:4px solid green;
border-top:4px solid green;
color:red;
font-size:16px;
height:50px;
line-height:24px;
padding:4px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("span").each(function() {
$(".categoryheader").parent().parent().parent().addClass("green");
});
});
</script>
Of course you can change the CSS to suit your requirements. The javascript searches the page for any span tag with a class name of “categoryheader” and once it finds one, it jumps up 3 tags to find the <TR> tag and adds the new class name of “green” to the <TR> and you end up with a divider line that goes across both columns… like below.