Question

我在Firefox中遇到一个问题，表格标题不符合其父级的宽度

例如我有

.table {
    width:50%;
    border: none;
    border-spacing:0;
    border-collapse: collapse;
 }

.table caption {
    Width:100%;
}

<table class="table" Style="float:left;">
<caption>Caption</caption>
</table>

然而，标题将扩展到页面宽度的100％而不是父页面。如果我将其设置为50％的宽度，它似乎尊重父宽度。我在IE，Edge或Chrome上没有问题

Answer 1

首先 - 制作一个更完整的表来反映实际代码

其次 - 不要将宽度设置为标题，因为不需要它

https://jsfiddle.net/uqfuvo5s/

＆＃13;

.table {
      width: 50%;
      border: none;
      border-spacing: 0;
      border-collapse: collapse;
    }

＆＃13;

<table class="table" Style="float:left;">
      <caption>Caption</caption>
      <tbody>
        <tr>
          <td>test</td>
        </tr>
      </tbody>
    </table>

＆＃13;

Firefox问题表格标题为100％宽度超出父元素

1 个答案: