How do I set this table row to a specific height using CSS?
up vote
0
down vote
favorite
I have researched this issue and tried a few suggestions but I must be missing something. This is a sample XML file with dummy data:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="SRRSchedule.xsl"?>
<SRRSchedule>
<ReportTitle>Assignments - October 2018</ReportTitle>
<Columns>
<Heading>Date</Heading>
<Heading>Hall Attendant</Heading>
<Heading>Car Park</Heading>
<Heading>Sound</Heading>
<Heading>Platform</Heading>
<Heading>Mic Left</Heading>
<Heading>Mic Right</Heading>
<Heading>Chairman</Heading>
<Heading>Watchtower Reader</Heading>
</Columns>
<MonthAssignments IncludeHeadings="true" IncludeGap="true">
<Assignment RowType="Odd">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="false" Highlight="false">Name 8</Name>
</Assignment>
<Assignment RowType="Even">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="false" Highlight="false">Name 8</Name>
</Assignment>
<Assignment RowType="Odd">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="false" Highlight="false">Name 8</Name>
</Assignment>
</MonthAssignments>
<MonthAssignments IncludeHeadings="true" IncludeGap="true">
<Assignment RowType="Even">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="true" Highlight="false">Name 8</Name>
</Assignment>
</MonthAssignments>
<MonthAssignments IncludeHeadings="true" IncludeGap="true">
<Assignment RowType="Odd">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<SpecialEvent>Circuit Assembly—Be Bold!</SpecialEvent>
</Assignment>
</MonthAssignments>
<Note>
All assigned brothers should try to arrive at least <u><b>15 minutes</b></u> before the meeting to confirm duties, set up and test the sound and prepare the platform.
</Note>
</SRRSchedule>
This is the CSS file:
body
{
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 12pt;
}
.textReportTitle {
text-align: center;
font-size: 18pt;
font-weight: 700;
}
table {
border-collapse: collapse;
width: 100%;
}
table td {
height: 14pt;
border: 1px solid black;
padding: 1mm;
}
.cellHeading {
font-weight: 700;
background-color: red;
}
.cellDate {
background-color: magenta;
}
.cellName {
}
.cellHighlight {
background-color: cyan;
}
.cellConflict {
background-color: gray;
}
.cellSpecialEvent {
text-align: center;
font-style: italic;
}
.cellNote {
text-align: center;
background-color: darkgrey;
}
.cellGap {
max-height: 5mm;
background-color: orange;
}
.rowOdd {
background-color: yellow;
}
.rowEven {
background-color: pink;
}
This is the XSL script:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="html" indent="yes" version="4.01"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
doctype-public="//W3C//DTD XHTML 1.0 Transitional//EN"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="SRRSchedule.css"/>
<title>Report</title>
</head>
<body>
<xsl:apply-templates select="SRRSchedule/ReportTitle"/>
<table cellpadding="0" cellspacing="0">
<xsl:apply-templates select="SRRSchedule/MonthAssignments"/>
<xsl:apply-templates select="SRRSchedule/Note"/>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="ReportTitle">
<p class="textReportTitle">
<xsl:value-of select="."/>
</p>
</xsl:template>
<xsl:template match="MonthAssignments">
<xsl:if test="@IncludeHeadings">
<tr>
<xsl:apply-templates select="/SRRSchedule/Columns/Heading"/>
</tr>
</xsl:if>
<xsl:apply-templates select="Assignment"/>
<xsl:if test="@IncludeGap='true'">
<xsl:call-template name="GapRow"/>
</xsl:if>
</xsl:template>
<xsl:template match="Heading">
<td class="cellHeading">
<xsl:value-of select="."/>
</td>
</xsl:template>
<xsl:template match="Assignment">
<tr>
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="@RowType='Even'">rowEven</xsl:when>
<xsl:when test="@RowType='Odd'">rowOdd</xsl:when>
</xsl:choose>
</xsl:attribute>
<xsl:apply-templates select="Date"/>
<xsl:apply-templates select="Name"/>
<xsl:apply-templates select="SpecialEvent"/>
</tr>
</xsl:template>
<xsl:template match="Date">
<td class="cellDate">
<xsl:value-of select="."/>
</td>
</xsl:template>
<xsl:template match="Name">
<td class="cellName">
<xsl:choose>
<xsl:when test="@Highlight='true'">
<xsl:attribute name="class">cellHighlight</xsl:attribute>
</xsl:when>
<xsl:when test="@Conflict='true'">
<xsl:attribute name="class">cellConflict</xsl:attribute>
</xsl:when>
</xsl:choose>
<xsl:value-of select="."/>
<!-- Test if the name is empty -->
<xsl:if test=".=''">
<xsl:text> </xsl:text>
</xsl:if>
</td>
</xsl:template>
<xsl:template match="Note">
<tr>
<td class="cellNote">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)"/>
</xsl:attribute>
<!-- Why does this not apply the HTML syntax? -->
<xsl:copy-of select="."/>
</td>
</tr>
</xsl:template>
<xsl:template match="SpecialEvent">
<td class="cellSpecialEvent">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)-1"/>
</xsl:attribute>
<xsl:value-of select="."/>
</td>
</xsl:template>
<xsl:template name="GapRow">
<!-- Why is this row not showing as 5mm high? -->
<tr>
<td class="cellGap">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)"/>
</xsl:attribute>
<xsl:text> </xsl:text>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
This is what the transformation looks like:
In the XSL file I have:
<xsl:template name="GapRow">
<!-- Why is this row not showing as 5mm high? -->
<tr>
<td class="cellGap">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)"/>
</xsl:attribute>
<xsl:text> </xsl:text>
</td>
</tr>
</xsl:template>
The CSS for this row gap is:
.cellGap {
max-height: 5mm;
background-color: orange;
}
How do I change this so that the row gap can be whatever height I stipulate in the CSS file? I tried reducing the font height to 6pt and it made no difference.
css html5 html-table
add a comment |
up vote
0
down vote
favorite
I have researched this issue and tried a few suggestions but I must be missing something. This is a sample XML file with dummy data:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="SRRSchedule.xsl"?>
<SRRSchedule>
<ReportTitle>Assignments - October 2018</ReportTitle>
<Columns>
<Heading>Date</Heading>
<Heading>Hall Attendant</Heading>
<Heading>Car Park</Heading>
<Heading>Sound</Heading>
<Heading>Platform</Heading>
<Heading>Mic Left</Heading>
<Heading>Mic Right</Heading>
<Heading>Chairman</Heading>
<Heading>Watchtower Reader</Heading>
</Columns>
<MonthAssignments IncludeHeadings="true" IncludeGap="true">
<Assignment RowType="Odd">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="false" Highlight="false">Name 8</Name>
</Assignment>
<Assignment RowType="Even">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="false" Highlight="false">Name 8</Name>
</Assignment>
<Assignment RowType="Odd">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="false" Highlight="false">Name 8</Name>
</Assignment>
</MonthAssignments>
<MonthAssignments IncludeHeadings="true" IncludeGap="true">
<Assignment RowType="Even">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="true" Highlight="false">Name 8</Name>
</Assignment>
</MonthAssignments>
<MonthAssignments IncludeHeadings="true" IncludeGap="true">
<Assignment RowType="Odd">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<SpecialEvent>Circuit Assembly—Be Bold!</SpecialEvent>
</Assignment>
</MonthAssignments>
<Note>
All assigned brothers should try to arrive at least <u><b>15 minutes</b></u> before the meeting to confirm duties, set up and test the sound and prepare the platform.
</Note>
</SRRSchedule>
This is the CSS file:
body
{
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 12pt;
}
.textReportTitle {
text-align: center;
font-size: 18pt;
font-weight: 700;
}
table {
border-collapse: collapse;
width: 100%;
}
table td {
height: 14pt;
border: 1px solid black;
padding: 1mm;
}
.cellHeading {
font-weight: 700;
background-color: red;
}
.cellDate {
background-color: magenta;
}
.cellName {
}
.cellHighlight {
background-color: cyan;
}
.cellConflict {
background-color: gray;
}
.cellSpecialEvent {
text-align: center;
font-style: italic;
}
.cellNote {
text-align: center;
background-color: darkgrey;
}
.cellGap {
max-height: 5mm;
background-color: orange;
}
.rowOdd {
background-color: yellow;
}
.rowEven {
background-color: pink;
}
This is the XSL script:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="html" indent="yes" version="4.01"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
doctype-public="//W3C//DTD XHTML 1.0 Transitional//EN"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="SRRSchedule.css"/>
<title>Report</title>
</head>
<body>
<xsl:apply-templates select="SRRSchedule/ReportTitle"/>
<table cellpadding="0" cellspacing="0">
<xsl:apply-templates select="SRRSchedule/MonthAssignments"/>
<xsl:apply-templates select="SRRSchedule/Note"/>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="ReportTitle">
<p class="textReportTitle">
<xsl:value-of select="."/>
</p>
</xsl:template>
<xsl:template match="MonthAssignments">
<xsl:if test="@IncludeHeadings">
<tr>
<xsl:apply-templates select="/SRRSchedule/Columns/Heading"/>
</tr>
</xsl:if>
<xsl:apply-templates select="Assignment"/>
<xsl:if test="@IncludeGap='true'">
<xsl:call-template name="GapRow"/>
</xsl:if>
</xsl:template>
<xsl:template match="Heading">
<td class="cellHeading">
<xsl:value-of select="."/>
</td>
</xsl:template>
<xsl:template match="Assignment">
<tr>
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="@RowType='Even'">rowEven</xsl:when>
<xsl:when test="@RowType='Odd'">rowOdd</xsl:when>
</xsl:choose>
</xsl:attribute>
<xsl:apply-templates select="Date"/>
<xsl:apply-templates select="Name"/>
<xsl:apply-templates select="SpecialEvent"/>
</tr>
</xsl:template>
<xsl:template match="Date">
<td class="cellDate">
<xsl:value-of select="."/>
</td>
</xsl:template>
<xsl:template match="Name">
<td class="cellName">
<xsl:choose>
<xsl:when test="@Highlight='true'">
<xsl:attribute name="class">cellHighlight</xsl:attribute>
</xsl:when>
<xsl:when test="@Conflict='true'">
<xsl:attribute name="class">cellConflict</xsl:attribute>
</xsl:when>
</xsl:choose>
<xsl:value-of select="."/>
<!-- Test if the name is empty -->
<xsl:if test=".=''">
<xsl:text> </xsl:text>
</xsl:if>
</td>
</xsl:template>
<xsl:template match="Note">
<tr>
<td class="cellNote">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)"/>
</xsl:attribute>
<!-- Why does this not apply the HTML syntax? -->
<xsl:copy-of select="."/>
</td>
</tr>
</xsl:template>
<xsl:template match="SpecialEvent">
<td class="cellSpecialEvent">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)-1"/>
</xsl:attribute>
<xsl:value-of select="."/>
</td>
</xsl:template>
<xsl:template name="GapRow">
<!-- Why is this row not showing as 5mm high? -->
<tr>
<td class="cellGap">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)"/>
</xsl:attribute>
<xsl:text> </xsl:text>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
This is what the transformation looks like:
In the XSL file I have:
<xsl:template name="GapRow">
<!-- Why is this row not showing as 5mm high? -->
<tr>
<td class="cellGap">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)"/>
</xsl:attribute>
<xsl:text> </xsl:text>
</td>
</tr>
</xsl:template>
The CSS for this row gap is:
.cellGap {
max-height: 5mm;
background-color: orange;
}
How do I change this so that the row gap can be whatever height I stipulate in the CSS file? I tried reducing the font height to 6pt and it made no difference.
css html5 html-table
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have researched this issue and tried a few suggestions but I must be missing something. This is a sample XML file with dummy data:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="SRRSchedule.xsl"?>
<SRRSchedule>
<ReportTitle>Assignments - October 2018</ReportTitle>
<Columns>
<Heading>Date</Heading>
<Heading>Hall Attendant</Heading>
<Heading>Car Park</Heading>
<Heading>Sound</Heading>
<Heading>Platform</Heading>
<Heading>Mic Left</Heading>
<Heading>Mic Right</Heading>
<Heading>Chairman</Heading>
<Heading>Watchtower Reader</Heading>
</Columns>
<MonthAssignments IncludeHeadings="true" IncludeGap="true">
<Assignment RowType="Odd">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="false" Highlight="false">Name 8</Name>
</Assignment>
<Assignment RowType="Even">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="false" Highlight="false">Name 8</Name>
</Assignment>
<Assignment RowType="Odd">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="false" Highlight="false">Name 8</Name>
</Assignment>
</MonthAssignments>
<MonthAssignments IncludeHeadings="true" IncludeGap="true">
<Assignment RowType="Even">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="true" Highlight="false">Name 8</Name>
</Assignment>
</MonthAssignments>
<MonthAssignments IncludeHeadings="true" IncludeGap="true">
<Assignment RowType="Odd">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<SpecialEvent>Circuit Assembly—Be Bold!</SpecialEvent>
</Assignment>
</MonthAssignments>
<Note>
All assigned brothers should try to arrive at least <u><b>15 minutes</b></u> before the meeting to confirm duties, set up and test the sound and prepare the platform.
</Note>
</SRRSchedule>
This is the CSS file:
body
{
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 12pt;
}
.textReportTitle {
text-align: center;
font-size: 18pt;
font-weight: 700;
}
table {
border-collapse: collapse;
width: 100%;
}
table td {
height: 14pt;
border: 1px solid black;
padding: 1mm;
}
.cellHeading {
font-weight: 700;
background-color: red;
}
.cellDate {
background-color: magenta;
}
.cellName {
}
.cellHighlight {
background-color: cyan;
}
.cellConflict {
background-color: gray;
}
.cellSpecialEvent {
text-align: center;
font-style: italic;
}
.cellNote {
text-align: center;
background-color: darkgrey;
}
.cellGap {
max-height: 5mm;
background-color: orange;
}
.rowOdd {
background-color: yellow;
}
.rowEven {
background-color: pink;
}
This is the XSL script:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="html" indent="yes" version="4.01"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
doctype-public="//W3C//DTD XHTML 1.0 Transitional//EN"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="SRRSchedule.css"/>
<title>Report</title>
</head>
<body>
<xsl:apply-templates select="SRRSchedule/ReportTitle"/>
<table cellpadding="0" cellspacing="0">
<xsl:apply-templates select="SRRSchedule/MonthAssignments"/>
<xsl:apply-templates select="SRRSchedule/Note"/>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="ReportTitle">
<p class="textReportTitle">
<xsl:value-of select="."/>
</p>
</xsl:template>
<xsl:template match="MonthAssignments">
<xsl:if test="@IncludeHeadings">
<tr>
<xsl:apply-templates select="/SRRSchedule/Columns/Heading"/>
</tr>
</xsl:if>
<xsl:apply-templates select="Assignment"/>
<xsl:if test="@IncludeGap='true'">
<xsl:call-template name="GapRow"/>
</xsl:if>
</xsl:template>
<xsl:template match="Heading">
<td class="cellHeading">
<xsl:value-of select="."/>
</td>
</xsl:template>
<xsl:template match="Assignment">
<tr>
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="@RowType='Even'">rowEven</xsl:when>
<xsl:when test="@RowType='Odd'">rowOdd</xsl:when>
</xsl:choose>
</xsl:attribute>
<xsl:apply-templates select="Date"/>
<xsl:apply-templates select="Name"/>
<xsl:apply-templates select="SpecialEvent"/>
</tr>
</xsl:template>
<xsl:template match="Date">
<td class="cellDate">
<xsl:value-of select="."/>
</td>
</xsl:template>
<xsl:template match="Name">
<td class="cellName">
<xsl:choose>
<xsl:when test="@Highlight='true'">
<xsl:attribute name="class">cellHighlight</xsl:attribute>
</xsl:when>
<xsl:when test="@Conflict='true'">
<xsl:attribute name="class">cellConflict</xsl:attribute>
</xsl:when>
</xsl:choose>
<xsl:value-of select="."/>
<!-- Test if the name is empty -->
<xsl:if test=".=''">
<xsl:text> </xsl:text>
</xsl:if>
</td>
</xsl:template>
<xsl:template match="Note">
<tr>
<td class="cellNote">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)"/>
</xsl:attribute>
<!-- Why does this not apply the HTML syntax? -->
<xsl:copy-of select="."/>
</td>
</tr>
</xsl:template>
<xsl:template match="SpecialEvent">
<td class="cellSpecialEvent">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)-1"/>
</xsl:attribute>
<xsl:value-of select="."/>
</td>
</xsl:template>
<xsl:template name="GapRow">
<!-- Why is this row not showing as 5mm high? -->
<tr>
<td class="cellGap">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)"/>
</xsl:attribute>
<xsl:text> </xsl:text>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
This is what the transformation looks like:
In the XSL file I have:
<xsl:template name="GapRow">
<!-- Why is this row not showing as 5mm high? -->
<tr>
<td class="cellGap">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)"/>
</xsl:attribute>
<xsl:text> </xsl:text>
</td>
</tr>
</xsl:template>
The CSS for this row gap is:
.cellGap {
max-height: 5mm;
background-color: orange;
}
How do I change this so that the row gap can be whatever height I stipulate in the CSS file? I tried reducing the font height to 6pt and it made no difference.
css html5 html-table
I have researched this issue and tried a few suggestions but I must be missing something. This is a sample XML file with dummy data:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="SRRSchedule.xsl"?>
<SRRSchedule>
<ReportTitle>Assignments - October 2018</ReportTitle>
<Columns>
<Heading>Date</Heading>
<Heading>Hall Attendant</Heading>
<Heading>Car Park</Heading>
<Heading>Sound</Heading>
<Heading>Platform</Heading>
<Heading>Mic Left</Heading>
<Heading>Mic Right</Heading>
<Heading>Chairman</Heading>
<Heading>Watchtower Reader</Heading>
</Columns>
<MonthAssignments IncludeHeadings="true" IncludeGap="true">
<Assignment RowType="Odd">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="false" Highlight="false">Name 8</Name>
</Assignment>
<Assignment RowType="Even">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="false" Highlight="false">Name 8</Name>
</Assignment>
<Assignment RowType="Odd">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="false" Highlight="false">Name 8</Name>
</Assignment>
</MonthAssignments>
<MonthAssignments IncludeHeadings="true" IncludeGap="true">
<Assignment RowType="Even">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<Name Conflict="false" Highlight="true">Name 1</Name>
<Name Conflict="false" Highlight="false">Name 2</Name>
<Name Conflict="false" Highlight="false">Name 3</Name>
<Name Conflict="false" Highlight="false">Name 4</Name>
<Name Conflict="false" Highlight="false">Name 5</Name>
<Name Conflict="false" Highlight="false">Name 6</Name>
<Name Conflict="false" Highlight="false">Name 7</Name>
<Name Conflict="true" Highlight="false">Name 8</Name>
</Assignment>
</MonthAssignments>
<MonthAssignments IncludeHeadings="true" IncludeGap="true">
<Assignment RowType="Odd">
<Date Day="6" DayShort="Thu" DayFull="Thursday" Month="12" MonthShort="Dec" MonthFull="December" Year="2018">Thu, October 04</Date>
<SpecialEvent>Circuit Assembly—Be Bold!</SpecialEvent>
</Assignment>
</MonthAssignments>
<Note>
All assigned brothers should try to arrive at least <u><b>15 minutes</b></u> before the meeting to confirm duties, set up and test the sound and prepare the platform.
</Note>
</SRRSchedule>
This is the CSS file:
body
{
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 12pt;
}
.textReportTitle {
text-align: center;
font-size: 18pt;
font-weight: 700;
}
table {
border-collapse: collapse;
width: 100%;
}
table td {
height: 14pt;
border: 1px solid black;
padding: 1mm;
}
.cellHeading {
font-weight: 700;
background-color: red;
}
.cellDate {
background-color: magenta;
}
.cellName {
}
.cellHighlight {
background-color: cyan;
}
.cellConflict {
background-color: gray;
}
.cellSpecialEvent {
text-align: center;
font-style: italic;
}
.cellNote {
text-align: center;
background-color: darkgrey;
}
.cellGap {
max-height: 5mm;
background-color: orange;
}
.rowOdd {
background-color: yellow;
}
.rowEven {
background-color: pink;
}
This is the XSL script:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="html" indent="yes" version="4.01"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
doctype-public="//W3C//DTD XHTML 1.0 Transitional//EN"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="SRRSchedule.css"/>
<title>Report</title>
</head>
<body>
<xsl:apply-templates select="SRRSchedule/ReportTitle"/>
<table cellpadding="0" cellspacing="0">
<xsl:apply-templates select="SRRSchedule/MonthAssignments"/>
<xsl:apply-templates select="SRRSchedule/Note"/>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="ReportTitle">
<p class="textReportTitle">
<xsl:value-of select="."/>
</p>
</xsl:template>
<xsl:template match="MonthAssignments">
<xsl:if test="@IncludeHeadings">
<tr>
<xsl:apply-templates select="/SRRSchedule/Columns/Heading"/>
</tr>
</xsl:if>
<xsl:apply-templates select="Assignment"/>
<xsl:if test="@IncludeGap='true'">
<xsl:call-template name="GapRow"/>
</xsl:if>
</xsl:template>
<xsl:template match="Heading">
<td class="cellHeading">
<xsl:value-of select="."/>
</td>
</xsl:template>
<xsl:template match="Assignment">
<tr>
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="@RowType='Even'">rowEven</xsl:when>
<xsl:when test="@RowType='Odd'">rowOdd</xsl:when>
</xsl:choose>
</xsl:attribute>
<xsl:apply-templates select="Date"/>
<xsl:apply-templates select="Name"/>
<xsl:apply-templates select="SpecialEvent"/>
</tr>
</xsl:template>
<xsl:template match="Date">
<td class="cellDate">
<xsl:value-of select="."/>
</td>
</xsl:template>
<xsl:template match="Name">
<td class="cellName">
<xsl:choose>
<xsl:when test="@Highlight='true'">
<xsl:attribute name="class">cellHighlight</xsl:attribute>
</xsl:when>
<xsl:when test="@Conflict='true'">
<xsl:attribute name="class">cellConflict</xsl:attribute>
</xsl:when>
</xsl:choose>
<xsl:value-of select="."/>
<!-- Test if the name is empty -->
<xsl:if test=".=''">
<xsl:text> </xsl:text>
</xsl:if>
</td>
</xsl:template>
<xsl:template match="Note">
<tr>
<td class="cellNote">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)"/>
</xsl:attribute>
<!-- Why does this not apply the HTML syntax? -->
<xsl:copy-of select="."/>
</td>
</tr>
</xsl:template>
<xsl:template match="SpecialEvent">
<td class="cellSpecialEvent">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)-1"/>
</xsl:attribute>
<xsl:value-of select="."/>
</td>
</xsl:template>
<xsl:template name="GapRow">
<!-- Why is this row not showing as 5mm high? -->
<tr>
<td class="cellGap">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)"/>
</xsl:attribute>
<xsl:text> </xsl:text>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
This is what the transformation looks like:
In the XSL file I have:
<xsl:template name="GapRow">
<!-- Why is this row not showing as 5mm high? -->
<tr>
<td class="cellGap">
<xsl:attribute name="colspan">
<xsl:value-of select="count(/SRRSchedule/Columns/Heading)"/>
</xsl:attribute>
<xsl:text> </xsl:text>
</td>
</tr>
</xsl:template>
The CSS for this row gap is:
.cellGap {
max-height: 5mm;
background-color: orange;
}
How do I change this so that the row gap can be whatever height I stipulate in the CSS file? I tried reducing the font height to 6pt and it made no difference.
css html5 html-table
css html5 html-table
asked Nov 22 at 8:36
Andrew Truckle
5,35942145
5,35942145
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
.cellGap {
max-height: none;
height: Number of Andrew's choosing in em, px, whatevs.
}
https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
Thanks. But if I set it to none I am no longer stating what height I want this gap row to be. I want to be able to state the height of this gap row.
– Andrew Truckle
Nov 22 at 9:01
1
please see edit
– Carol McKay
Nov 22 at 9:12
Thank you. I will try this.
– Andrew Truckle
Nov 22 at 9:44
Thanks. Works well. I also had to setpadding: 0;
for it to be the height I wanted.
– Andrew Truckle
Nov 22 at 17:25
You're welcome @AndrewTruckle
– Carol McKay
Nov 23 at 3:12
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
.cellGap {
max-height: none;
height: Number of Andrew's choosing in em, px, whatevs.
}
https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
Thanks. But if I set it to none I am no longer stating what height I want this gap row to be. I want to be able to state the height of this gap row.
– Andrew Truckle
Nov 22 at 9:01
1
please see edit
– Carol McKay
Nov 22 at 9:12
Thank you. I will try this.
– Andrew Truckle
Nov 22 at 9:44
Thanks. Works well. I also had to setpadding: 0;
for it to be the height I wanted.
– Andrew Truckle
Nov 22 at 17:25
You're welcome @AndrewTruckle
– Carol McKay
Nov 23 at 3:12
add a comment |
up vote
1
down vote
accepted
.cellGap {
max-height: none;
height: Number of Andrew's choosing in em, px, whatevs.
}
https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
Thanks. But if I set it to none I am no longer stating what height I want this gap row to be. I want to be able to state the height of this gap row.
– Andrew Truckle
Nov 22 at 9:01
1
please see edit
– Carol McKay
Nov 22 at 9:12
Thank you. I will try this.
– Andrew Truckle
Nov 22 at 9:44
Thanks. Works well. I also had to setpadding: 0;
for it to be the height I wanted.
– Andrew Truckle
Nov 22 at 17:25
You're welcome @AndrewTruckle
– Carol McKay
Nov 23 at 3:12
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
.cellGap {
max-height: none;
height: Number of Andrew's choosing in em, px, whatevs.
}
https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
.cellGap {
max-height: none;
height: Number of Andrew's choosing in em, px, whatevs.
}
https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
edited Nov 22 at 9:11
answered Nov 22 at 8:50
Carol McKay
1,9011711
1,9011711
Thanks. But if I set it to none I am no longer stating what height I want this gap row to be. I want to be able to state the height of this gap row.
– Andrew Truckle
Nov 22 at 9:01
1
please see edit
– Carol McKay
Nov 22 at 9:12
Thank you. I will try this.
– Andrew Truckle
Nov 22 at 9:44
Thanks. Works well. I also had to setpadding: 0;
for it to be the height I wanted.
– Andrew Truckle
Nov 22 at 17:25
You're welcome @AndrewTruckle
– Carol McKay
Nov 23 at 3:12
add a comment |
Thanks. But if I set it to none I am no longer stating what height I want this gap row to be. I want to be able to state the height of this gap row.
– Andrew Truckle
Nov 22 at 9:01
1
please see edit
– Carol McKay
Nov 22 at 9:12
Thank you. I will try this.
– Andrew Truckle
Nov 22 at 9:44
Thanks. Works well. I also had to setpadding: 0;
for it to be the height I wanted.
– Andrew Truckle
Nov 22 at 17:25
You're welcome @AndrewTruckle
– Carol McKay
Nov 23 at 3:12
Thanks. But if I set it to none I am no longer stating what height I want this gap row to be. I want to be able to state the height of this gap row.
– Andrew Truckle
Nov 22 at 9:01
Thanks. But if I set it to none I am no longer stating what height I want this gap row to be. I want to be able to state the height of this gap row.
– Andrew Truckle
Nov 22 at 9:01
1
1
please see edit
– Carol McKay
Nov 22 at 9:12
please see edit
– Carol McKay
Nov 22 at 9:12
Thank you. I will try this.
– Andrew Truckle
Nov 22 at 9:44
Thank you. I will try this.
– Andrew Truckle
Nov 22 at 9:44
Thanks. Works well. I also had to set
padding: 0;
for it to be the height I wanted.– Andrew Truckle
Nov 22 at 17:25
Thanks. Works well. I also had to set
padding: 0;
for it to be the height I wanted.– Andrew Truckle
Nov 22 at 17:25
You're welcome @AndrewTruckle
– Carol McKay
Nov 23 at 3:12
You're welcome @AndrewTruckle
– Carol McKay
Nov 23 at 3:12
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426798%2fhow-do-i-set-this-table-row-to-a-specific-height-using-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown