表格内的div不扩展100％

Question

我在表格行后面的表格中添加了一个div，它不会花费100％，但总是坚持到第一个td。

<div style="width:100%;border:1px solid red;height:30px;">Test Div</div>

注意：我可以使用colspan将我的div放在td中，但我有动态的表列，所以我想我不能使用colspan

你们可以请看一下吗？

Answer 1

逻辑上，您无法在表格行之间附加 DIV 。如果你想要一个宽度为100％的div，那么在TD上使用 colspan 属性，然后在其中添加div。

根据您的表格结构，下面是示例，您需要有一个如下所示的新行，而不仅仅是 DIV ：

<tr>
   <td colspan=6>
      <div style="width:100%;border:1px solid red;height:30px;">Test Div</div>
   </td>
</tr>

Answer 2

正如Nishesh Pratap所指出的，正确的方法是添加动态的colspan值。

但是如果你真的只想采用CSS方式，你可以使用白空间规则。它将允许您的文本溢出上一个TD。

请记住，此规则还允许文本溢出表格。

.forbidWrap{
  white-space: nowrap;
  border: 1px solid blue;
  display: inline-block;
}

table{
  table-layout: fixed;
  width: 600px;
  border-collapse: collapse;
  text-align: left;
  position: relative;
}

th{
  background-color: #666;
  color: white;
}

td{
  border-bottom: 1px solid #ccc;  
}

<table>
  <tr>
    <th>head</th>
    <th>head</th>
    <th>head</th>
    <th>head</th>
  </tr>
  <tr>
    <td>
      <div class="forbidWrap">
        The content of this div will overflow on other columns
      </div>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>7282</td>
    <td>782</td>
    <td>785</td>
    <td>1589</td>
  </tr>
</table>