Question

我有以下XSL，XML和CSS：

 <?xml version="1.0" ?>
      <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
      <xsl:output method="xml" omit-xml-declaration="yes" indent="yes" />

      <!-- Indentation. HTML output beautifier-->
      <xsl:strip-space elements="*"/>
      <xsl:template match="/">
           <xsl:copy-of select="."/>
      </xsl:template>

      <xsl:template match="/">
           <html>
                <head>
                     <title><xsl:value-of select="doc/page/name"/></title>
                     <link rel="stylesheet" type="text/css" href="styles.css" />
                </head>
                <body>
                     <xsl:for-each select="doc/item">
                          <div class="item">
                                <xsl:apply-templates/>
                          </div>
                     </xsl:for-each>
                </body>
          </html>
    </xsl:template>

    <!-- XML <value> -->
    <xsl:template match="doc/item/section/row">
         <p>
              <xsl:for-each select="value">
                   <xsl:value-of select="."/><br />
              </xsl:for-each>
         </p>
    </xsl:template>

    <!-- XML <section name> -->
    <xsl:template match="doc/item/section/name">
          <p><strong><xsl:value-of select="."/></strong></p>
    </xsl:template>

    <!-- XML <item name> -->
    <xsl:template match="doc/item/name">
         <p><strong><xsl:value-of select="."/></strong></p>
    </xsl:template>

</xsl:stylesheet>

XML：

<?xml version="1.0" encoding="utf-8"?>
<doc>
     <page>
          <name>GoPro</name>
     </page>
     <item>
          <name>GoPro Hero 4 Black</name>  
          <section>
               <name>Video resolution</name>
               <row>
                    <value>4K</value>
                    <value>30, 25, 24</value>
                    <value>Ultra wide</value>
                    <value>3840x2160</value>
                    <note></note>
               </row>
               <row>
                    <value>4K Superview</value>
                    <value>24</value>
                    <value>Ultra wide</value>
                    <value>3840x2160</value>
                    <note></note>
               </row>
               <row>
                    <value>WVGA</value>
                    <value>240</value>
                    <value>Ultra wide</value>
                    <value>848x480</value>
                    <note></note>
               </row>
          </section>
          <section>
               <name>Video format</name>
               <row>    
                    <value>H.264 codec, .MP4 file format</value>
                    <note></note>
               </row>
          </section>
          <section>
               <name>Weight</name>
               <row>    
                    <value>88g (3.1oz)</value>
                    <value>With housing: 152g (5.4oz)</value>
                    <note></note>
               </row>
          </section>
     </item>
     <item>
          <name>GoPro Hero 4 Silver</name>
          <section>
               <name>Video resolution</name>
               <row>
                    <value>4K</value>
                    <value>15, 12.5</value>
                    <value>Ultra wide</value>
                    <value>3840x2160</value>
                    <note></note>
               </row>
               <row>
                    <value>-</value>
                    <value>-</value>
                    <value>-</value>
                    <value>-</value>
                    <note></note>
               </row>
               <row>
                    <value>WVGA</value>
                    <value>240</value>
                    <value>Ultra wide</value>
                    <value>848x480</value>
                    <note></note>
               </row>
          </section>
          <section>
               <name>Video format</name>
               <row>
                    <value>H.264 codec, .MP4 file format</value>
                    <note></note>
               </row>
          </section>
          <section>
                <name>Weight</name>
                <row>
                     <value>83g (oz)</value>
                     <value>With housing: 147g (oz)</value>
                     <note></note>
                </row>
          </section>
     </item>
 </doc>

CSS：

 .item {
      width: 250px;
      float: left;
 }

由于CSS .item类，输出正确显示在两列上。

但现在我想达到以下结果：

                   | GoPro 3 Black    | GoPro 3 Silver
----------------------------------------------------------
| Video resolution | 4K               | 4K               |
|                  | 30, 25, 24       | 15, 12.5         |
|                  | Ultra wide       | Ultra wide       |
|                  | ...              | ...              |
|                  |                  |                  |
| Video format     | H.264            | H.264            |
|                  | ...              | ...              |
|                  |                  |                  |

视频分辨率，视频格式，重量位于最左侧列且正确垂直间距位于正确的高度相应的价值。

当我刚刚开始学习XSL时，我想知道这可以用XSL完成，或者我必须用CSS来解决。

我更喜欢不使用HTML TABLE 作为后续词我想使用一些javascript效果隐藏并显示我将保留在DIV内的列。

XSL。并排显示两列或更多列中的数据

0 个答案: