How to add gridlines/borders to your forums

[alex.smart]

*Massive thanks to Lynne from vBulletin.org for posting a better version of my css*

Heres what you need to add into additional.css in order to get your forum and topic modules looking more traditional....

/* border on forum module */
table.forum-list-container tr.forum-item td.cell-forum { border-width: 1px 1px 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}
table.forum-list-container tr.forum-item td.topics-count, table.forum-list-container tr.forum-item td.posts-count, table.forum-list-container tr.forum-item td.lastpost { border-width: 1px 1px 0 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}
table.forum-list-container tr.subforum-list td { border-width: 1px 1px 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px; padding-top: 15px;}
table.forum-list-container tr.subforum-list td.subforum-item { border: none; padding-top: 0;}
table.forum-list-container tr.category-header td { border-width: 1px 1px 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}
table.forum-list-container tr.subforum-list td.subforum-item { border: none; padding-top: 0;}
div.list-footer {border-width: 1px 1px 1px; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}

/* border on topics module */
table.topic-list-container tbody.topic-list td.cell-topic { border-width: 1px 0 0 1px; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}
table.topic-list-container tbody.topic-list td.cell-icons { border-width: 1px 1px 0 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}
table.topic-list-container tbody.topic-list td.cell-lastpost { border-width: 1px 1px 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}
table.topic-list-container tbody.topic-list td.cell-inlinemod-item { border-width: 1px 1px 0 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}

/* moving various elements for new borders */
.forum-list-container .forum-item .lastpost > .lastpost-wrapper > .lastpost-info {position:relative;left:6px;}
.forum-list-container .forum-item .lastpost > .lastpost-wrapper > .avatar {position:relative;left:6px;}
.forum-list-container .forum-list-header .header-lastpost {padding-left:6px;}
.forum-list-container .subforum-list .subforum-header.h-clear {position:relative;top:8px;}
.topic-list-container .topic-list .cell-count .posts-count {position:relative;left:6px;}
.topic-list-container .topic-list .cell-count .votes-count {position:relative;left:6px;}
.topic-list-container .topic-list .cell-count .views-count {position:relative;left:6px;}
.topic-list-container .topic-list-header .header-stats {padding-left:6px;}
.topic-list-container .topic-list .cell-lastpost .lastpost-by {position:relative;left:6px;}
.topic-list-container .topic-list .cell-lastpost .post-date {position:relative;left:6px;}
.topic-list-container .topic-list .cell-lastpost .go-to-last-post {position:relative;left:6px;}
.topic-list-container .topic-list .cell-lastpost .avatar.h-left {position:relative;left:6px;}
.topic-list-container .topic-list-header .header-lastpost {padding-left:6px;}

[glennrocksvb]

That's too much code when you can do it with much fewer CSS rules.

.forum-list-container, .topic-list-container { border-collapse: collapse; }
    .topic-list-container .topic-list .topic-item td,
    .forum-list-container .subforum-list > td,
    .forum-list-container .forum-item td,
    .forum-list-container .category-header td { border: 1px solid #C8CCCE; }
.topic-list-container .topic-list .topic-item .cell-topic { border-right: 0; }
.topic-list-container .topic-list .topic-item .cell-icons { border-left: 0; }
.topic-list-container .topic-list .topic-item .cell-count,
    .topic-list-container .topic-list .topic-item td.cell-lastpost,
    .topic-list-container .topic-list-header .header-stats,
    .topic-list-container .topic-list-header .header-lastpost,
    .forum-list-container .forum-item .lastpost,
    .forum-list-container .forum-list-header .header-lastpost { padding-left: 6px; }
.forum-list-container .subforum-list .subforum-header { margin-top: 6px; }
.list-footer { border-left: 1px solid #C8CCCE; border-right: 1px solid #C8CCCE; }

The trick here is the use of border-collapse: collapse on the table. With that, you don't have to set each td with different border widths. You just set all 4 borders of each td to 1px and you don't have to worry about adjacent tds having two 1px borders because the adjacent borders are collapsed into one.

And you just set the left padding on cells and all its content will automatically move instead of setting each cell content to relative position and left coordinates.