表 - 如何使其正确适合

Question

在ASP网页上，我有一个包含2个部分的表格。列有控件 - 文本，标签，文本框，标签和＆amp;标签分别。我希望列只占用所需的空间。没有设置任何宽度。

这是我桌子的图像：

我希望前4列排成一列。那很有效 第5列 - 第2节的文本很长，因此第1节第5列也变宽。

我已经为每个部分使用了tbody。

我试过以下：将第1节第5列打成2列。第2节将有colspan = 2。但是，第1节第5列并没有占用所需的空间。我如何实现这一目标？

这让我发疯了。如何轻松设计表格？你有什么工具可以帮助这种表吗？任何建议都非常感谢。

Answer 1

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

Answer 2

您必须指定某种宽度，否则所有单元格都相等。

我会使用包含<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%;
}

Answer 3

将第1部分和第2部分放在不同的表中，并将这些表放在主表中。

<table>
  <tr>
       <td>
           Section 1
       </td>
  </tr>
   <tr>
       <td>
           Section 2
       </td>
  </tr>
</table>

Answer 4

我使用了你的代码＆amp;添加了一些标签。问题我谈到了附加图像中显示的第5列。

查看生成的网页： http://img855.imageshack.us/img855/1781/table2a.jpg

我感动＆amp;合并了一些专栏。 这是我的最新动态： http://img651.imageshack.us/img651/3738/table3z.jpg

这是我能用桌子做的最好的吗？或者有人可以提出更好的方法

<table align = "left" border= "2">
    <tr>
        <td colspan="10">
            Section 1
        </td>
        <td>
            &nbsp;</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">
            &nbsp;</td>
        <td>
            &nbsp;</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">
                &nbsp;</td>
        <td>
                &nbsp;</td>
    </tr>
    <tr>
        <td>
            2
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
            &nbsp;</td>
        <td colspan="4">
        </td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            3
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
            &nbsp;</td>
        <td colspan="4">
        </td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            4</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td colspan="4">
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            5</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td colspan="4">
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
        </td>
        <td colspan="3">
        </td>
        <td>
        </td>
        <td>
            &nbsp;</td>
        <td colspan="4">
        </td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td colspan="7">
            Section-2
        </td>
        <td colspan="3">
            Section-3
        </td>
        <td>
            &nbsp;</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>
            &nbsp;</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>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            2
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td colspan="3">
        </td>
        <td>
            2</td>
        <td>
        </td>
        <td>
        </td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            3
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td colspan="3">
        </td>
        <td>
            3</td>
        <td>
        </td>
        <td>
        </td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            4</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td colspan="3">
            &nbsp;</td>
        <td>
            4</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            5</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td colspan="3">
            &nbsp;</td>
        <td>
            5&nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td colspan="3">
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td colspan="3">
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
</table>