Как да редувам цвета на реда на таблицата с помощта на CSS в 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 без нищо 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>

И ето 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>

xml html css xslt
person ruijiang-ma    schedule 26.01.2021    source източник
comment
От предоставения xml имате само един ред. (ss:Worksheet/ss:Table/ss:Row)   -  person Fabrizio Calderan    schedule 26.01.2021
comment
Кой браузър е това? HTML/CSS работи ли със статичен HTML документ? За XSLT променете <xsl:output indent="yes" method="html" /> на <xsl:output method="html" indent="yes" version="5" doctype-system="about:legacy-doctype"/> и проверете дали след това браузърът прилага вашия CSS.   -  person Martin Honnen    schedule 26.01.2021

Отговори (1)


arrow_upward
0
arrow_downward

Просто коригирайте селектора, който имате върху елемента 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 */
}
person HisPowerLevelIsOver9000    schedule 26.01.2021
comment
Благодаря ти! Затова замених моя код вътре ‹style›tr:nth-child(even) ‹/style› с вашия: tr:nth-child(2n-1) {background-color: Lightgreen;} Но той все още не прави нищо , таблицата е същата като преди. Моля, посочете, ако съм направил нещо нередно! Благодаря ти! - person ruijiang-ma; 26.01.2021