Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
189 views
in Technique[技术] by (71.8m points)

html - How to alternate table row color using CSS inside XSLT?

So I was able to use an XSLT to transform an XML into an HTML file. But now I want to style the table (alternate table row color using CSS). I tried to add below code snippet inside the XSLT but it doesn't do anything.

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

Can you help me how to do that? Below is my xslt without anything sytle:

<?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>

And here is the XML file that gets transformed:

<?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>
question from:https://stackoverflow.com/questions/65904322/how-to-alternate-table-row-color-using-css-inside-xslt

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Just adjust the selector you have on the tr element.

If you're not getting the effect using :nth-child(even), you can use the following:

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 */
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...