Html 对齐嵌套表中的行和列_Html_Css

Html 对齐嵌套表中的行和列

html css

Html 对齐嵌套表中的行和列,html,css,Html,Css,我试图通过XSLT处理XML文件以生成HTML报告。该报告包含一个包含3列的表：Description、Date和Note。此表的一行可能包含一个说明，但包含多个日期和注释。单个描述的日期和注释成对出现，但有时缺少日期或注释。我可能有以下问题：注释没有相应的日期，因此日期注释对表示是倾斜的（请参见示例中的日期1.2和注释1.2）。所需的表示将在另一行上有一个空行，后跟日期1.2 注释跨越多行，但其对应的日期不跨越多行，因此以下注释与其日期不对齐这里有一个例子。我使用元素进行演示 <ta

我试图通过XSLT处理XML文件以生成HTML报告。该报告包含一个包含3列的表：Description、Date和Note。此表的一行可能包含一个说明，但包含多个日期和注释。单个描述的日期和注释成对出现，但有时缺少日期或注释。我可能有以下问题：

注释没有相应的日期，因此日期注释对表示是倾斜的（请参见示例中的日期1.2和注释1.2）。所需的表示将在另一行上有一个空行，后跟日期1.2

注释跨越多行，但其对应的日期不跨越多行，因此以下注释与其日期不对齐

这里有一个例子。我使用

元素进行演示

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

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

假设您需要根据内容自动调整宽度，请尝试在此处提供的示例中进行更改


表，th，td
{
边框：1px纯黑；
}
月
储蓄
一月
$100
二月
$80
HTML5不支持宽度属性。改用CSS

我想我成功了

我所做的是：

我把第二排和第三排分成两排
我给的第一个
```
rowspan=“2”
```
我创建了两个类：
```
bt
```
和
```
bb
```

HTML:

这里有一个

应该添加此作为评论，然后很抱歉，这不是获得销售代表的方式。@vinod哦，亲爱的。。。它确实需要50个代表。我们都去过那里。。。这并不意味着用答案来发表你的评论。请不要这样做，这是将来的事。@vinod链接到另一个站点不是答案。解释OP代码的错误并给出解决方案就是一个答案。我确实尝试过使用px或%设置嵌套表列宽。但是，列宽不会在外部表的行之间对齐。谢谢。基本上，我认为您建议使用rowspan属性。我现在正在考虑。我认为在XSLT中这样做可能很有挑战性，因为我不知道我将提前拥有多少个日期注释对。因此，我不知道rowspan属性的值是什么。我将在这里再次尝试并评论这一点。我采用了这种方法，而且似乎有效。谢谢！

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

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

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