在 ASP 网页上，我有一个包含 2 个部分的表格。这些列分别具有控件 - 文本、标签、文本框、标签和标签。我希望这些列只占用所需的空间。没有设置任何宽度。
这是我的桌子的图像：
我希望前 4 列排成一行。那行得通 第 5 列 - 第 2 节的文本很长，因此第 1 节的第 5 列也变宽了。
我在每个部分都使用了 tbody。
我尝试了以下操作：将 Section-1 的第 5 列分成 2 列。第 2 节的 colspan=2。但是，第 1 节第 5 列不仅占用了所需的空间。我如何做到这一点？
这快把我逼疯了。一张设计表怎么轻松？你有什么工具可以帮助这种表格吗？非常感谢任何建议。
【问题讨论】：
标签： html css asp.net html-table
将第 1 节和第 2 节放在单独的表下，并将这些表放在主表中。
<table>
<tr>
<td>
Section 1
</td>
</tr>
<tr>
<td>
Section 2
</td>
</tr>
</table>
【讨论】：
<table>
<tr>
<td colspan="9">Section 1</td>
</tr>
<tr>
<td>Item</td>
<td>Description</td>
<td>Unit</td>
<td>Unit<br/>Cost</td>
<td>Total<br/>Cost</td>
<td colspan="4">Notes</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="6">Section-2</td>
<td colspan="3">Section-3</td>
</tr>
<tr>
<td>Item</td>
<td>Description</td>
<td>Unit</td>
<td>Unit<br/>Cost</td>
<td colspan="2">Notes</td>
<td>Item</td>
<td>Description</td>
<td>Unit<br/>Cost</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
【讨论】：
我使用了您的代码并添加了一些标签。我讲的问题在attcached图像中显示的第5列。
查看生成的网页： http://img855.imageshack.us/img855/1781/table2a.jpg
我移动并合并了一些列。 这是我想出的： http://img651.imageshack.us/img651/3738/table3z.jpg
这是我能用桌子做的最好的事情吗？或者有人可以提出更好的方法
<table align = "left" border= "2">
<tr>
<td colspan="10">
Section 1
</td>
<td>
</td>
</tr>
<tr>
<td>
Item
</td>
<td>
Description
</td>
<td>
Unit
</td>
<td>
Unit<br />
Cost
</td>
<td>
Total<br />
Cost
</td>
<td>
Notes
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td>
1
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<asp:Label ID="lblFixedAnnual6" runat="server">123456</asp:Label>
</td>
<td>
<asp:Label ID="lblFixedNotes6" runat="server">This is a long long text. This is a long long text. This is a long long text. This is a long long text. This is a long long text. This is a long long text. </asp:Label>
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td>
4</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td>
5</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td colspan="3">
</td>
<td>
</td>
<td>
</td>
<td colspan="4">
</td>
<td>
</td>
</tr>
<tr>
<td colspan="7">
Section-2
</td>
<td colspan="3">
Section-3
</td>
<td>
</td>
</tr>
<tr>
<td>
Item
</td>
<td>
Description
</td>
<td>
Unit
</td>
<td>
Unit<br />
Cost
</td>
<td colspan="3">
Notes
</td>
<td>
Item
</td>
<td>
Description
</td>
<td>
Unit<br />
Cost
</td>
<td>
</td>
</tr>
<tr>
<td>
1
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
<asp:Label ID="lblEventNotes6" runat="server">This will be long text as well</asp:Label>
</td>
<td>
1</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
</td>
<td>
2</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
</td>
<td>
3</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
4</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
</td>
<td>
4</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
5</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
</td>
<td>
5 </td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td colspan="3">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
【讨论】：
您必须指定某种宽度，否则所有单元格都相等。
我会选择包含 <colgroup/> 和 <col /> 元素的解决方案。这样你就可以有多个表并且只有相同的<colgroups>。
表 1：http://jsfiddle.net/XwvTj/2/
<table>
<colgroup>
<col class="regular" />
<col class="extended" />
<col class="regular" />
<col class="regular" />
</colgroup>
<colgroup>
<col />
<col />
<col class="regular" />
<col class="extended" />
<col class="regular" />
</colgroup>
<thead>
<tr class="section">
<th colspan="9">Section 1</th>
</tr>
<tr class="title">
<th>Item</th>
<th>Description</th>
<th>Unit</th>
<th>Unit Price</th>
<th>Total Cost</th>
<th colspan="4">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td colspan="4">6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td colspan="4">6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td colspan="4">6</td>
</tr>
</tbody>
<thead>
<tr class="section">
<th colspan="6">Section 2</th>
<th colspan="3">Section 3</th>
</tr>
<tr class="title">
<th>Item</th>
<th>Description</th>
<th>Unit</th>
<th>Unit Price</th>
<th colspan="2">Notes</th>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td colspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td colspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td colspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td colspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
不幸的是，这意味着设置特定的宽度并需要colspan="#"
另一个建议：（我的偏好）：http://jsfiddle.net/XwvTj/1/
<table>
<colgroup>
<col class="regular" />
<col class="extended" />
<col class="regular" />
<col class="regular" />
</colgroup>
<colgroup>
<col class="regular"/>
<col />
</colgroup>
<thead>
<tr class="section">
<th colspan="6">Section 1</th>
</tr>
<tr class="title">
<th>Item</th>
<th>Description</th>
<th>Unit</th>
<th>Unit Price</th>
<th>Total Cost</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
<table>
<colgroup>
<col class="regular" />
<col class="extended" />
<col class="regular" />
<col class="regular" />
</colgroup>
<colgroup>
<col />
<col class="regular" />
<col class="extended" />
<col class="regular" />
</colgroup>
<thead>
<tr class="section">
<th colspan="5">Section 2</th>
<th colspan="3">Section 3</th>
</tr>
<tr class="title">
<th>Item</th>
<th>Description</th>
<th>Unit</th>
<th>Unit Price</th>
<th>Notes</th>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
这意味着没有更多的colspan="#"
两者的css：
table
{
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
table td, table th
{
border: 1px solid black;
}
tr.section th
{
text-align: left;
}
tr.title th
{
vertical-align: top;
}
col.regular
{
width: 9%
}
col.extended
{
width: 17%;
}
【讨论】：