Firefox浏览器中表格tr rowspan属性显示异常问题求助

问题原因 #

Firefox与Chrome在计算包含rowspan属性的嵌套表格布局时，单元格高度解析逻辑存在差异。当内部表格设置height:100%时，Firefox会为跨多行的单元格额外分配空白高度，导致间隙出现，而Chrome会自动适配内容高度。

解决方案 #

1. 移除内部表格的height:100%设置，避免浏览器高度计算冲突
2. 给内部表格添加table-layout: fixed属性，强制按指定列宽布局，统一浏览器的布局计算逻辑
3. 确保所有<tr>元素无额外默认边距、内边距干扰

修改后的代码示例 #

<table class="table " cellspacing="0" id="__load" style="width: 100% !important; border-collapse: collapse">
  <thead>
    <tr>
      <th>আনন্দ পাঠ (বাংলা দ্রুত পঠন)</th>
      <th width="50%" style="text-align: right;">
        <i class="btn btn-xs btn-primary" id="__append_seed" data-sid="MQ==" data-cid="MQ==">Seed</i>
        <i class="btn btn-xs btn-primary" id="__append" data-sid="MQ==" data-cid="MQ==">Create</i>
      </th>
    </tr>
  </thead>
  <tbody id="__tbody">
    <tr>
      <td colspan="2">
        <!-- 关键修改：移除height:100%，添加table-layout: fixed -->
        <table cellspacing="0" style="width: 100%; border-collapse: collapse; table-layout: fixed">
          <tbody>
            <tr>
              <td rowspan="2" style="border: 1px solid black; width: 10rem">অভিজ্ঞতা শিরোনাম </td>
              <td rowspan="2" style="border: 1px solid black; vertical-align: middle;text-align: center;" width="20%">একক যোগ্যতা . </td>
              <td rowspan="2" style="border: 1px solid black; vertical-align: middle;text-align: center; word-wrap: break-word" width="5%">পারদর্শিতা সূচক (PI)নং.</td>
              <td rowspan="2" style="word-wrap: anywhere; border: 1px solid black; vertical-align: middle;text-align: center;" width="20%">পারদর্শিতার সূচক</td>
              <td style="border: 1px solid black; text-align: center;" colspan="3">
                <span>পারদর্শিতার মাত্রা</span>
              </td>
              <td rowspan="2" style="border: 1px solid black">Action</td>
            </tr>
            <tr>
              <td style="text-align: center;  border: 1px solid black  ">○</td>
              <td style="text-align: center;  border: 1px solid black  ">△</td>
              <td style="text-align: center;  border: 1px solid black  ">◻</td>
            </tr>
          </tbody>
          <tbody>
            <tr class="__trash_17">
              <td rowspan="4" style="border: 1px solid black;text-align: left; vertical-align: top ">
                <span>7.2</span>
                <span>ভিভিন্ন ভিভিন্ন পরিস্থিতিতে রিস্থিতিতে যো যোগাযোগে যোগের অনুশসংক্ষিপ্ত কথোপকথন তৈরি করার কাজটি দলের সকল সদস্য মিলে আলোচনা করে প্রস্তুত করবে। ভূমিকাভিনয়ের কাজটি দলের সকলে মিলে বা মনোনীত কয়েকজন সদস্য মিলে উপস্থাপন করতে পারো।শীলনন করা</span>
              </td>
              <td rowspan="4" style="border: 1px solid black;text-align: left; vertical-align: top ">
                <span>সংক্ষিপ্ত কথোপকথন তৈরি করার কাজটি দলের সকল সদস্য মিলে আলোচনা করে প্রস্তুত করবে। ভূমিকাভিনয়ের কাজটি দলের সকলে মিলে বা মনোনীত কয়েকজন সদস্য মিলে উপস্থাপন করতে পারো।</span>
              </td>
            </tr>
            <tr class="__trash_17">
              <td style="border: 1px solid black; vertical-align: top; text-align: left" width="5%"> 7.2.1 </td>
              <td style="border: 1px solid black; vertical-align: top; text-align: left" width="20%"></td>
              <td style="border: 1px solid black; vertical-align: top; text-align: left">Quisquam a</td>
              <td style="border: 1px solid black; vertical-align: top; text-align: left">Id quia ve</td>
              <td style="border: 1px solid black; vertical-align: top; text-align: left">Est dolore</td>
              <td rowspan="3" style="border: 1px solid black">
                <i class="fa fa-circle btn btn-xs btn-primary __edit__ has-ripple" data-id="MTc="></i>
                <i class="fa fa-trash btn btn-xs btn-danger mt-1 __delete__" data-id="MTc="></i>
              </td>
            </tr>
            <tr class="__trash_17">
              <td style="border: 1px solid black; vertical-align: top; text-align: left" width="5%"> 7.2.2 </td>
              <td style="border: 1px solid black; vertical-align: top; text-align: left" width="20%"></td>
              <td style="border: 1px solid black; vertical-align: top; text-align: left">Rerum ipsu</td>
              <td style="border: 1px solid black; vertical-align: top; text-align: left">Sit deseru</td>
              <td style="border: 1px solid black; vertical-align: top; text-align: left">Consequatu</td>
            </tr>
            <tr class="__trash_17">
              <td style="border: 1px solid black; vertical-align: top; text-align: left" width="5%"> 7.2.3 </td>
              <td style="border: 1px solid black; vertical-align: top; text-align: left" width="20%"></td>
              <td style="border: 1px solid black; vertical-align: top; text-align: left">Ex adipisi</td>
              <td style="border: 1px solid black; vertical-align: top; text-align: left">Odit ad po</td>
              <td style="border: 1px solid black; vertical-align: top; text-align: left">Minima ali</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

补充说明 #

如果仍有间隙，可给所有<tbody>添加以下CSS样式，确保Firefox以统一方式渲染表格行组：

tbody {
  display: table-row-group;
  vertical-align: middle;
}

内容的提问来源于stack exchange，提问作者Nobody Mr