I am using XMetaL 6.0 to display styled XML using a limited subset of CSS. One thing that I have been tasked to do is display a definition list in a tabular format without borders. What I am trying to achieve is something like Example 2 at http://www.the-art-of-web.com/css/format-dl/#section_2. However, I am limited to the subset of CSS described at http://na.justsystems.com/webhelp/en/xmetaldeveloper/cg/6.0/cg.html#View%20support%20for%20properties%20and%20selectors. Does anyone have any suggestions on how I might best pull this off?
Just for sake of example, and in case someone asks, let's say that my xml for this snippet is something like:
<dl>
<di>
<dt>first item</dt>
<dd>
<p>definition for first item in list</p>
</dd>
</di>
<di>
<dt>second item</dt>
<dd>
<p>definition for second item in list</p>
<p>extending across more than one line</p>
</dd>
</di>
<di>
<dt>third item</dt>
开发者_如何学JAVA <dd>
<p>definition for third item in list</p>
</dd>
</di>
</dl>
Any suggestions would be greatly appreciated. Please let me know if I can provide any additional details.
According to the XMetal specs, you can style elements to look like table
s using display:table;
, etc. Read more here.
So you could do this
dl {
display: table;
}
di{
display:table-row;
}
dt{
display:table-cell;
font-weight:bold;
padding-right:15px;
}
dd{
display:table-cell;
padding-bottom:10px;
}
Example: http://jsfiddle.net/jasongennaro/E5yG8/
精彩评论