CSS Table Cell Borders

June 27, 2008 at 2:45 pm 1 comment

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

Advertisements

Entry filed under: SharePoint Designer, SharePoint Tips and Tricks, Web Application. Tags: , , , , , .

Web Application Design (part 2) Site Theme Change

1 Comment Add your own

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed



%d bloggers like this: