Sometime we get some requirement to add some styles in SharePoint list views. Yesterday, I got it from CEO that he wants to add lines in between each list item in all lists in his Team Site. I tried to add following CSS style on the page by following Heather Solomon guide but for some reason it was not working for me. http://bit.ly/11mXRAd
/*Set border for every row */
.ms-listviewtable > tbody > tr td{
border-bottom: 1px solid #AFAFAF !important; /* !important needed over override SharePoint inline style */
}
Initially sample list was look like this.
I added few lines of jQuery on the page and it started look like this.
Following is the code I used to do this.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td:empty").html(' ');
var $listView = $('.ms-listviewtable .ms-vb2 ');
$listView.attr( 'style', 'border-bottom: 1px solid black !important');
var $listView1 = $('.ms-listviewtable .ms-vb-title');
$listView1.attr( 'style', 'border-bottom: 1px solid black!important');
var $listViewTable = $('.ms-listviewtable');
$listViewTable.attr('style', 'border-collapse: collapse !important');
});
</script>
No comments:
Post a Comment