Html 具有额外TD的父表内的100%宽度嵌套表布局

我正在尝试创建一个嵌套的表布局，因此当您单击某个行元素时，内部表将显示为下拉列表，我这里的主要问题是，内部表布局需要占用100%的可用空间，并且由于父布局比内部表多了一个TD，因此我找不到实现这一点的方法。这里有一张桌子设计图：

以下是HTML：

              <table class="table table-striped">
            <thead>
              <th><input type="checkbox"></th>
              <th>UBICACION</th>
              <th>EQUIPO</th>
              </th>
            </thead> 
            <tbody>                 
              <tr>
                <td><input type="checkbox"></td>                  
                <td><a href="#">Edificio 4</a></td>
                <td></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>                  
                <td><a href="#">Azotea</a>
                </td>
                <td></td>
              </tr>
              <tr class="current">
                <td><input type="checkbox"></td>
                <td><a href="#">Mástil 1</a>
                  <table class="table-equipment">
                    <thead></thead>
                    <tbody>
                      <tr>
                        <td></td>
                        <td>
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td><i class="fa fa-exclamation-triangle"></i></td>
                      </tr>
                      <tr>
                        <td></td>
                        <td>
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td><i class="fa fa-exclamation-triangle"></td>
                      </tr>
                      <tr>
                        <td></td>
                        <td>
                          <p class="client">PANEL_VDF_GSM_UMTS_S3 VODAFONE</p>
                          <p class="equipment">Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35, Antena Panel 2.5x0.35</p>
                        </td>
                        <td><i class="fa fa-exclamation-triangle"></td>
                      </tr>                                                    
                    </tbody>
                  </table>
                </td>
                <td></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td><a href="#">Tripode Autosoportado ORG1</a></td>
                <td></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>                  
                <td><a href="#">Mástil 3</a></td>
                <td></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>                  
                <td><a href="#">Mástil 2</a></td>
                <td></td>
              </tr>                                                                                
            </tbody>
          </table>

---

处理这个问题的简单方法是在td上使用colspan属性，该属性需要覆盖两个tds。这里有一个很好的例子：

一个简单的例子是：

<table>
    <thead>
        <Tr><th>id</th><th>details</th></Tr>
    </thead>
    <tbody>
        <tr><td>1</td><td colspan="2">stuff</td></tr>
        <tr><td></td><Td>details</Td><td>more details</td></tr>
    </tbody>
</table>

ID详细信息
1凝灰岩
细节更多细节

---

我想您可以通过组合使用

colspan

，

表格布局：固定

，并为列提供

宽度

来实现这一点

通过将您的子表作为

.current

tr的同级表移动（即将其移到外部），进行了一个小的更改。并从子表中删除了一个空列

<tr class="current">
        <td>
            <input type="checkbox">
        </td>
        <td><a href="#">Mástil 1</a></td>
        <td></td>
    </tr>
   <tr><td><!--- your subtable ---></td></tr>

泛化
装备
PANEL\u VDF\u GSM\u UMTS\u S3沃达丰
天线面板2.5x0.35、天线面板2.5x0.35、天线面板2.5x0.35、天线面板
面板2.5x0.35
PANEL\u VDF\u GSM\u UMTS\u S3沃达丰
天线面板2.5x0.35、天线面板2.5x0.35、天线面板2.5x0.35、天线面板
面板2.5x0.35
PANEL\u VDF\u GSM\u UMTS\u S3沃达丰
天线面板2.5x0.35、天线面板2.5x0.35、天线面板2.5x0.35、天线面板
面板2.5x0.35

Hi@hairmot当我应用你的解决方案时，你的小提琴不起作用，内表不会扩展最后一个TD。谢谢你@luciency，我使用了你的部分解决方案，它起了作用，但现在我有一些问题，内表边框没有覆盖父表的100%。这是一张图片，非常感谢您的帮助。@Lowtrux，您是否需要内部表格中的第一个单元格，如果不需要，您是否可以删除它。。。？另外，如果您可以编写一个小提琴，看到一个图像并不能解释DOM结构，那就太好了：（.您是否能够使用'inspect element'来定位内部表。有些猜测是-在s的第一行没有正确设置宽度，{table layout:fixed}如果没有设置宽度，会导致一些wierd问题。你完全正确@lucientic，这是我最后一次更改的代码笔：，谢谢！@Lowtrux:你有什么理由把你的子表放在一个表中吗？它不能移到tr.current下面的另一个新行。这会解决你的大部分问题！是的，我更改了它，现在我有了布局但是我想说，非常感谢！

<tr class="current">
        <td>
            <input type="checkbox">
        </td>
        <td><a href="#">Mástil 1</a></td>
        <td></td>
    </tr>
   <tr><td><!--- your subtable ---></td></tr>