簡體   English   中英

如何在 XSLT 中使用 CSS 交替表格行顏色?

[英]How to alternate table row color using CSS inside XSLT?

所以我能夠使用 XSLT 將 XML 轉換為 HTML 文件。 但現在我想為表格設置樣式(使用 CSS 替換表格行顏色)。 我嘗試在 XSLT 中添加以下代碼片段,但它沒有做任何事情。

<head> 
    <style> 
        table { 
            border-collapse: collapse; 
            width: 100%; 
        } 
          
        th, td { 
            text-align: left; 
            padding: 8px; 
        } 
          
        tr:nth-child(even) { 
            background-color: Lightgreen; 
        } 
    </style> 
</head> 

你能幫我怎么做嗎? 下面是我的 xslt 沒有任何樣式:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" exclude-result-prefixes="ss">
<xsl:output indent="yes" method="html" />

    <xsl:template match="/ss:Workbook">
        <html>
            <body>
                <h2>University of Colorado Boulder</h2>
                <table border="1">

                    <xsl:for-each select="ss:Worksheet/ss:Table/ss:Row">
                        <tr>
                            <xsl:for-each select="ss:Cell/ss:Data">
                                <td>
                                    <xsl:value-of select="text()"/>
                                </td>
                            </xsl:for-each>
                        </tr>
                    </xsl:for-each>
                </table>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

這是經過轉換的 XML 文件:

<?xml version="1.0"?>
<?mso-application progid="Excel.Sheet"?>
<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
 xmlns:o="urn:schemas-microsoft-com:office:office"
 xmlns:x="urn:schemas-microsoft-com:office:excel"
 xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
 xmlns:html="http://www.w3.org/TR/REC-html40">

 <ExcelWorkbook xmlns="urn:schemas-microsoft-com:office:excel">
  <WindowHeight>7725</WindowHeight>
  <WindowWidth>17790</WindowWidth>
  <WindowTopX>0</WindowTopX>
  <WindowTopY>0</WindowTopY>
  <ProtectStructure>False</ProtectStructure>
  <ProtectWindows>False</ProtectWindows>
 </ExcelWorkbook>
 <Worksheet ss:Name="Page1">
  <Table ss:ExpandedColumnCount="22" ss:ExpandedRowCount="11465" x:FullColumns="1"
   x:FullRows="1">
   <Row ss:AutoFitHeight="0">
    <Cell ss:StyleID="s62"><Data ss:Type="String">TERM CD</Data></Cell>
    <Cell ss:StyleID="s62"><Data ss:Type="String">TERM LD</Data></Cell>
    <Cell ss:StyleID="s62"><Data ss:Type="String">CAMPUS CD</Data></Cell>
    <Cell ss:StyleID="s62"><Data ss:Type="String">SESSION CD</Data></Cell>
    <Cell ss:StyleID="s62"><Data ss:Type="String">SESSION SD</Data></Cell>
    <Cell ss:StyleID="s62"><Data ss:Type="String">SESSION LD</Data></Cell>
    <Cell ss:StyleID="s62"><Data ss:Type="String">ACAD CAR CD</Data></Cell>
    <Cell ss:StyleID="s62"><Data ss:Type="String">ACAD GRP CD</Data></Cell>
   </Row>
  </Table>
  <WorksheetOptions xmlns="urn:schemas-microsoft-com:office:excel">
   <PageSetup>
    <Header x:Margin="0.3"/>
    <Footer x:Margin="0.3"/>
    <PageMargins x:Bottom="0.75" x:Left="0.7" x:Right="0.7" x:Top="0.75"/>
   </PageSetup>
   <Selected/>
   <Panes>
    <Pane>
     <Number>3</Number>
     <ActiveRow>5</ActiveRow>
     <ActiveCol>5</ActiveCol>
    </Pane>
   </Panes>
   <ProtectObjects>False</ProtectObjects>
   <ProtectScenarios>False</ProtectScenarios>
  </WorksheetOptions>
 </Worksheet>
</Workbook>

只需調整您在 tr 元素上的選擇器。

如果使用:nth-child(even) 沒有得到效果,可以使用以下命令:

tr:nth-child(2n) {
   /*put your code here, this will alternate the styles for every other row 
    starting at the second row */
}

tr:nth-child(2n-1) {
    /* put your code here, this will alternate the styles for every other row 
    starting at the first row */
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM