Question

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

注释没有相应的日期，因此日期 - 注释对表示倾斜（请参阅示例中的日期1.2和注释1.2）。所需的表示将在另一行上有一个空行，后面跟着日期1.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>

这是一个小提琴的链接：JSFiddle。

我尝试用嵌套表来解决这个问题：对于外表的每一行，我创建了一个包含2列的嵌套表，每行包含一个日期注释对（或一个空单元格和一个注释）。日期和备注现在对齐。但是，嵌套表的列宽不会跨外表的行对齐。我试图通过使用样式

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

列现在对齐。但是，有时候音符会被切掉并且不可见（使用溢出样式我可以让它们出现在桌边框之外，但看起来很丑陋）。理想情况下，我希望列宽可以根据音符进行调整。长度。

Answer 1

假设您需要根据内容自动调整宽度，请尝试更改此处提供的示例 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_width

<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td width="70%">January</td>
    <td width="30%">$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

<p>The width attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>

Answer 2

我想我成功了！

我做的是：

我打破了第二行和第三行
到我给的第一个rowspan="2"
我创建了两个类：bt和bb

HTML：

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

的CSS：

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

这是 fiddle

对齐嵌套表中的行和列

2 个答案: