CSS Table Cell Borders

Just a quick post to store a line of code I need, but others may find helpful. I have some Multiple Item Views that are styled using CSS to have a border. The problem is, if there is no value in the field, the table cell doesn’t get created so the borders don’t exist. This issue has existed in HTML for ages and it could be easily remedied by placing a ’space’ in the cell as a default value. The code for space in HTML is “ ” (without the quotes). But in a SharePoint dataview you have to do something slightly different:

SharePoint Dataview table cells can be padded with this line of code:

 <xsl:text xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime” ddwrt:nbsp-preserve=”yes” disable-output-escaping=”yes”>&amp;nbsp;</xsl:text>

You would add the code within the <td> brackets of the table cell. For example:

<td width=”75%” class=”ms-vb”>
       <xsl:value-of select=”@JobTitle” />
 </td>

Would be changed to:

<td width=”75%” class=”ms-vb”>
       <xsl:value-of select=”@JobTitle” /> <xsl:text xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime” ddwrt:nbsp-preserve=”yes” disable-output-escaping=”yes”>&amp;nbsp;</xsl:text>
</td>

Now if the table cell contains no value, it will still contain a space and therefor the table cell will still render in the HTML when the page is displayed. Just be aware that when a user copies and pastes out of the cell, there will be an additional space tacked on to the end of the selection.

Hope that helps