css - 如何使用 CSS 将此表格行设置为特定高度？

标签 css html html-table

我研究了这个问题并尝试了一些建议，但我一定遗漏了一些东西。这是一个包含虚拟数据的示例 XML 文件:

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

这是 CSS 文件:

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;
}

这是 XSL 脚本:

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

这是转换的样子:

Results

在我的 XSL 文件中:

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

此行间隙的 CSS 是:

.cellGap {
    max-height: 5mm;
    background-color: orange;
}

如何更改它，使行间距可以是我在 CSS 文件中规定的任何高度？我尝试将字体高度降低到 6pt，但没有任何区别。

最佳答案 

.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

关于css - 如何使用 CSS 将此表格行设置为特定高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53426798/

上一篇：html - Bootstrap 旋转木马元素内容在两个单独的 div 水平

下一篇：javascript - 在 FORM 的选择中使用图像的最佳实践

相关文章：

php - MySQL 将 HTML 表中的行插入到数据库表中

css - 我如何包含一个包含变量的混合，然后在父组合器中更改该变量值？

html - 如何将隐藏的溢出应用到宽度为 500% 的 div

html - 在页面加载时隐藏滑动/推送菜单？

css - 造型 polymer 元素的可扩展设置

javascript - 使用 JavaScript 从 HTML 字符串中提取文本

javascript - 如何使用 allowAdditions 使语义 UI 下拉列表工作

html - 为什么 Transition css 在子选择器 css 中不起作用

jquery - 使用jquery设置td的值

jquery - 避免使用 jQuery 突出显示所有行和列

©2024 IT工具网  联系我们