html - 对齐嵌套表格中的行和列

Question

我正在尝试通过 XSLT 处理 XML 文件以生成 HTML 报告。该报告包含一个包含 3 列的表格:描述、日期和注释。此表的一行可能包含一个描述，但包含多个日期和注释。单个描述的日期和注释形成对，但有时缺少日期或注释。我可能会遇到以下问题:

1. 注释没有相应的日期，因此日期-注释对表示是倾斜的(参见示例中的日期 1.2 和注释 1.2)。所需的表示将有一个空行，后跟另一行上的日期 1.2。
2. 一个注释跨越多行，但它对应的日期却没有，所以后面的注释与它们的日期不对齐。

这是一个例子。我用了<br/>用于演示目的的元素。

<table>
<tr>
    <td class="firstcolumn">Description</td>
    <td>Date</td>
    <td class="lastcolumn">Note</td>
</tr>
<tr>
    <td class="firstcolumn">Description 1. Could span multiple lines.</td>
    <td valign="top" align="right">Date 1.2</td>
    <td valign="top" align="right" class="lastcolumn">Note without date 1.1<br/>  Note 1.2</td>
</tr>
<tr>
    <td class="firstcolumn">Description 2.</td>
    <td valign="top" align="right">Date 2.1<br/> Date 2.2</td>
    <td valign="top" align="right" class="lastcolumn">Some really long note<br/>spanning multiple lines 2.1<br/> Note 2.2</td>
</tr>
</table>

这是 fiddle 的链接:JSFiddle .

我尝试用嵌套表解决这个问题:对于外部表的每一行，我创建了一个包含 2 列的嵌套表，其中每一行包含一个日期注释对(或一个空单元格和一个注释)。日期和注释现在对齐。但是，嵌套表的列宽不会跨外部表的行对齐。我试图通过使用样式设置所有嵌套表格宽度来解决这个问题

table { width:100%;table-layout:fixed;} /* for each nested table */
td {width:90px;} /* for the columns of nested tables */

列现在对齐了。但是，有时注释会被截断并且不可见(使用溢出样式我可以使它们出现在表格边框之外，但看起来很难看)。理想情况下，我希望列宽可以根据注释的长度进行调整。

Answer 1

我想我做到了!

我所做的是:

• 我把第二行和第三行分成两行
• 我给的第一个 rowspan="2"
• 我创建了两个类:bt 和 bb

table {
  border-collapse: collapse;
  width: 75%;
}

td {
  border-collapse: collapse;
  border: 1px solid black;
  padding: 0px;
  margin: 0px;
  font-family: Calibri;
}

td.firstcolumn {
  width: 60%;
}

td.lastcolumn {
  width: 25%;
}

.bt {
  border-top: 0;
}

.bb {
  border-bottom: 0;
}

<table>
  <tr>
    <td class="firstcolumn">Description</td>
    <td>Date</td>
    <td class="lastcolumn">Note</td>
  </tr>
  <tr>
    <td rowspan="2" class="firstcolumn">Description 1. Could span multiple lines.</td>
    <td class="bb" valign="top" align="right"></td>
    <td class="bb" valign="top" align="right">Note without date 1.1</td>
  </tr>
  <tr>
    <td class="bt" valign="top" align="right">Date 1.2</td>
    <td class="bt" valign="top" align="right" class="lastcolumn"> Note 1.2</td>
  </tr>
  <tr>
    <td rowspan="2" class="firstcolumn">Description 2.</td>
    <td class="bb" valign="top" align="right">Date 2.1</td>
    <td class="bb" valign="top" align="right" class="lastcolumn">Some really long note<br/>spanning multiple lines 2.1</td>
  </tr>
  <tr>
    <td class="bt" valign="top" align="right"> Date 2.2</td>
    <td class="bt" valign="top" align="right" class="lastcolumn">Note 2.2</td>
  </tr>
</table>

这是一个 fiddle