如何让HTML段落宽度与下方动态生成的表格保持一致？

CSS 方案（推荐） #

通过包裹容器的 inline-block 属性让容器宽度自适应表格，再让段落占满容器宽度，完全动态适配表格变化，无需固定值。

代码示例 #

HTML 结构

<div class="table-wrapper">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eros mi, tristique vel ipsum in, semper posuere lacus. Nullam quis lacus tristique, vehicula quam at, ultricies felis.</p>
  <table border="1">
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
    <tr>
      <td>Column 1 data</td>
      <td>Column 2 has a longer amount of data</td>
      <td>Column 3 data</td>
    </tr>
  </table>
</div>

CSS 样式

.table-wrapper {
  display: inline-block; /* 容器宽度自适应内部最宽元素（表格） */
}
.table-wrapper p {
  width: 100%; /* 段落占满容器宽度，与表格同宽 */
  margin: 0 0 1em 0; /* 可选：调整段落与表格的间距 */
}

JavaScript/jQuery 方案 #

适合无法修改 CSS 结构的场景，通过获取表格宽度并赋值给段落实现适配，需注意在表格渲染完成后执行代码。

原生 JavaScript 代码 #

// DOM 加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const table = document.querySelector('table');
  const paragraph = document.querySelector('p');
  if (table && paragraph) {
    paragraph.style.width = `${table.offsetWidth}px`;
    // 若表格后续动态更新数据，需重新调用此代码更新段落宽度
  }
});

jQuery 代码 #

$(document).ready(function() {
  const tableWidth = $('table').width();
  $('p').width(tableWidth);
  // 表格动态更新后，再次执行此代码即可同步宽度
});

内容的提问来源于stack exchange，提问作者Graeme Perrow