开发者

How can I display a definition list in a tabular format using XML and a limited CSS subset?

开发者 https://www.devze.com 2023-04-05 00:13 出处:网络
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

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 tables 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/

0

精彩评论

暂无评论...
验证码 换一张
取 消