html - 副标题宽度未按需要在 HTML 表格中设置，表格布局为 :fixed

Question

我是网页设计新手。我想制作一个带有副标题的固定宽度的表格。我编写了这样的代码:

 table.all_border *{
                border: 1px solid black;
            }

<!-- TABLE 1 -->
<table class="all_border" style="width: 564px; margin-top: 10px; font-size: 0.8em; table-layout:fixed; overflow:hidden;">
    <tr align="center">
        <th style="padding:2.5px; width: 46px;" rowspan="2">Item No</th>
        <th style="padding:2.5px; width: 288px;" rowspan="2">DESCRIPTION</th>
        <th style="padding:2.5px; width: 30px" rowspan="2">Qty</th>
        <th style="padding:2.5px; width: 100px" colspan="2">Rate per Item</th>
        <th style="padding:2.5px; width: 100px" colspan="2">AMOUNT</th>
    </tr>
    <tr>
        <th style="width:80px">Rs.</th>
        <th style="width:20px">P.</th>
        <th style="width:80px">Rs.</th>
        <th style="width:20px">P.</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material </td>
        <td>4</td>
        <td>12345678</td>
        <td>00</td>
        <td>12345678</td>
        <td>00</td>
    </tr>
</table>


<!-- TABLE 2 -->
<table class="all_border" style="width: 564px; margin-top: 10px; font-size: 0.8em;">
                <tr align="center">
                    <th style="padding:2.5px; width: 46px;" rowspan="2">Item No</th>
                    <th style="padding:2.5px; width: 288px;" rowspan="2">DESCRIPTION</th>
                    <th style="padding:2.5px; width: 30px" rowspan="2">Qty</th>
                    <th style="padding:2.5px; width: 100px" colspan="2">Rate per Item</th>
                    <th style="padding:2.5px; width: 100px" colspan="2">AMOUNT</th>
                </tr>
                <tr>
                    <th style="width:80px">Rs.</th>
                    <th style="width:20px">P.</th>
                    <th style="width:80px">Rs.</th>
                    <th style="width:20px">P.</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Test Material</td>
                    <td>4</td>
                    <td>12</td>
                    <td>00</td>
                    <td>12</td>
                    <td>00</td>
                </tr>
            </table>

现在我的问题是，表 1 中带有 table-layout:fixed; 的子标题的宽度(Rs. 和 P.)未设置为期望并平分。

但是，表 2 具有所需的(Rs. 和 P.)比率，但宽度不固定。

我怎样才能充分利用这两者？感谢您的帮助。

提前致谢。

Answer 1

更新

OP 要求最后 4 个 <th> 是 80/20 而不是 50/50。它没有更改为 80/20 的原因是因为必须将固定宽度应用于第一行以使宽度符合显式长度。

1. 删除了 colspan:2 属性/值
2. 在 <th> 的顶行添加了 2 个 <thead>
3. 将 <th> 的右边框设置为 80px 宽度为 0 none rgba(0,0,0,0)
4. 将 <th> 的左边框设置为 20px 宽度为 0 none rgba(0,0,0,0)

5. 为了使文本在 2 <th> 上居中:

   • 将文本包装在 <b> 中

   • 设置position:relative和z-index:1

使用<tbody>

1. 合并两个表，因为:
   • 它们代表相同类型的数据
   • 而且他们离得很近
2. 要合并，去掉第一个表的结束标签</table>
3. 去掉第二张表的开始标签<table>

4. 在两个表之间插​​入以下内容:

   <tbody>
    ------Table 1 
   </tbody>
   
   <tbody>
     <tr>
       <td colspan='7'>
         <div class='space'>&nbsp;</div>
       </td>
     </tr>
   </tbody>
   
   <tbody>
    ------Table 2
   </tbody>
   

5. 在 <tbody> 标签中包裹顶部和底部表格部分。

6. 应用下面演示中的 CSS 后，此表格将显示为空白区域。

在一个表中使用多个 <tbody> 是完全有效的，符合标准，实际上是被鼓励的。 AFAIK，不可见的表是可以的，但如果你关心标准，你可以在那里放置任意数据(不必是可见的文本 - color:transparent。)

演示

table.border td,
table.border th {
  border: 1px solid black;
}

tbody:last-of-type>tr:first-child>th {
  margin-top: 20px;
}

tbody:nth-of-type(2) td {
  border: 0 none transparent;
}

.space {
  height: 10px;
  border: 0 none transparent;
}

.c80.c80 {
  width: 80px;
  white-space: nowrap;
  overflow-x: visible;
  text-align: right;
  margin-right: -5px;
  border-right: 0 none rgba(0, 0, 0, 0) !important;
}

.c20.c20 {
  width: 20px;
  white-space: nowrap;
  overflow-x: visible;
  text-align: left;
  margin-left: -5px;
  border-left: 0 none rgba(0, 0, 0, 0) !important;
}

th b {
  display: block;
  position: relative;
  z-index: 1;
  background: #fff;
  margin-left: 8px;
}

td:nth-of-type(odd) {
  text-align: center;
}

td:nth-of-type(even) {
  text-align: right
}

td:nth-of-type(2) {
  text-align: left;
}

<main>
  <table class="border" style="width: 564px; margin-top: 10px; font-size: 0.8em; table-layout:fixed; overflow:hidden;">
    <thead>
      <tr>
        <th style="padding:2.5px; width: 46px;" rowspan="2">Item No</th>
        <th style="padding:2.5px; width: 288px;" rowspan="2">DESCRIPTION</th>
        <th style="padding:2.5px; width: 30px" rowspan="2">Qty</th>

        <th class='c80'><b>Rate per Item</b></th>
        <th class='c20'></th>
        <th class='c80'><b>AMOUNT</b></th>
        <th class='c20'></th>
      </tr>
      <tr>
        <th style="width:80px">Rs.</th>
        <th style="width:20px">P.</th>
        <th style="width:80px">Rs.</th>
        <th style="width:20px">P.</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1</td>
        <td>Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material </td>
        <td>4</td>
        <td>12345678</td>
        <td>00</td>
        <td>12345678</td>
        <td>00</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td colspan='7'>
          <div class='space'>&nbsp;</div>
        </td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <th style="padding:2.5px; width: 46px;" rowspan="2">Item No</th>
        <th style="padding:2.5px; width: 288px;" rowspan="2">DESCRIPTION</th>
        <th style="padding:2.5px; width: 30px" rowspan="2">Qty</th>
        <th style="padding:2.5px; width: 100px" colspan="2">Rate per Item</th>
        <th style="padding:2.5px; width: 100px" colspan="2">AMOUNT</th>
      </tr>

      <tr>
        <th style="width:80px">Rs.</th>
        <th style="width:20px">P.</th>
        <th style="width:80px">Rs.</th>
        <th style="width:20px">P.</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Test Material</td>
        <td>4</td>
        <td>12</td>
        <td>00</td>
        <td>12</td>
        <td>00</td>
      </tr>
    </tbody>
  </table>
</main>