结论：

Question

我有一个包含表格的HTML页面。该表是从服务器端的数据库动态生成的。我希望表的宽度来确定整个页面的宽度。也就是说，表格上方和下方的其他块元素应采用与表格相同的宽度。

我不想使用固定宽度。我更喜欢纯粹的CSS解决方案，但如果用JavaScript捏造东西是唯一的方法，那就这样吧。我需要相当广泛的浏览器支持。

我尝试在表格周围使用div display: inline-block和其他块元素。我们的想法是让div“缩小以适应”桌子周围，从而设置其他元素的宽度。这不起作用，我认为这是因为div不知道里面的哪个元素应该是“主”，确定其他元素的宽度。

修改：添加了一个小提琴：http://jsfiddle.net/5Z3ru/。在这个例子中，我希望表格上方的段落与表格的宽度相同（不是相反）。我不想为表格或段落使用固定宽度。

编辑2 ：从概念上讲，我想要的东西可以想象就好像桌子是单独渲染在一个单独的文档中一样。然后，渲染表插入到新文档中，渲染表的宽度用于设置新文档的宽度。因此，最终文档中没有任何内容影响表的呈现，并且表宽度成为决定最终文档宽度的唯一因素。

Answer 1

让我们将wrap的初始渲染宽度称为X。
wrap，在最初渲染时未指定任何宽度，将自动填充屏幕上可用的所有可用水平空间。在这种情况下，文档的整个宽度。因此，在这种情况下，X =文件的100％。
如果没有指定新的宽度，不能使X小于100％（除了此处没有用的方法）。
使用CSS，您可以使table成为wrap扩展的唯一决定因素，因为它自然会扩展为包含一个超过X的表格。
要使wrap缩小到X以下，为动态值（table的自然宽度），您必须使用Javascript。这意味着文档将加载，然后表格宽度已确定（var w = $( "table" ).width()），然后宽度应用于wrap（{ {1}}）。

Answer 2

使用表和文本周围的换行div，您需要具有反向继承并使wrap div继承表的宽度。不幸的是，虽然我们很多人都想要它，但没有反向继承。或者，您可以直接让元素自然地继承表的宽度，这也是我所知道的也是不可能的。继承宽度的唯一方法是来自父级，因此在这种情况下，的父级必须是表，即使表没有动态生成，因为放入{{表中的元素会影响它的宽度，你最终会告诉元素继承它自己的宽度。反向继承和父选择器需求量很大但不存在。我认为你能做到这一点的唯一方法就是使用JavaScript。

我知道没有办法只在HTML和CSS中这样做，所以对任何想出来的人都要欢呼。我对这个问题很感兴趣，我想知道是否有一些我遗漏的东西。

我相信JavaScript是要走的路。

Answer 3

我相信这里的先前答案已经是正确的：treboothjd6。

结论：

lt是不可能的。

解决方法

设置宽度

关于表，这是非常不幸的，我认为，缺少CSS解决方案是导致CSS混乱的主要原因，因为大多数CSS开发人员都会为整个表或其列设置宽度。这可能会导致间距不一致，并且在所有其他尺寸方面都需要严格的严格度。然后为其他所需的元素使用相同的宽度，以获得更好的设计约束。

使用javascript获取计算表宽度

还有另一种使用较少的解决方案，是可行的解决方案，但是它确实需要JavaScript。

使用javascript放置className：例如：.jsEnabled或使用等效的-modernizr。
在CSS中，隐藏父类，以防止在先前宽度和所需宽度之间出现闪烁，闪烁，浏览器渲染延迟的故障。
在Javascript中检测表的计算宽度。表的可见性是隐藏的，不是没有隐藏的，因此浏览器仍然可以检测到其占用的宽度。然后使用该宽度动态设置所需的其他元素，即父元素。
现在使用javascript重新显示父元素。

由于大多数网站现在无论如何都依赖js，因此此解决方案可为您提供所需的动态特性，同时减少了CSS混乱，而不必像以前的变通方法那样遵循由选定宽度预先确定的尺寸级联。

示例代码笔： https://codepen.io/inspiraller/pen/bGEeNeQ?editors=1111

js


const tablewidth = (strParentSelector, strTableSelector) => {
  const getWidth = $elem => {
    const computed = window.getComputedStyle($elem);
    return computed.getPropertyValue('width');
  };
  const setWidth = ($elem, width) => {
    $elem.style.width = width;
  };
  const show = $elem => {
    $elem.style.visibility = 'visible';
  }
 
  const $parent = document.querySelector(strParentSelector);
  const $table = document.querySelector(strTableSelector);
  const width = getWidth($table);

  setWidth($parent, width);
  show($parent);
};

const enableJS = () => {
  document.body.classList.add("jsEnabled");
}

const docReady = fn => {
    if (document.readyState === "complete" || document.readyState === "interactive") {
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}  

enableJS();
docReady(() => {
  tablewidth('.someParent', '.tableGeneric');
});

css

.jsEnabled .someParent {
  visibility: hidden;
}

html

<section class="someParent">
<table class="tableGeneric" summary="Test Diary">
  <thead>
    <tr>
      <th class="thtd thtd--date">
        DATE
      </th>
      <th class="thtd thtd--time">
        TIME
      </th>
      <th class="thtd thtd--cat_dudar_its_friend">
        CAT
      </th>
      <th class="thtd thtd--subcat">
        SUBCAT
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="thtd thtd--2018 ">2018</td>
      <td class="thtd thtd--0100 ">0100</td>
      <td class="thtd thtd--sup ">sup</td>
      <td class="thtd thtd--zinc,_mag,_niacn_200mg ">zinc, mag, niacn 200mg</td>
    </tr>
    <tr>
      <td class="thtd thtd--2018 ">2018</td>
      <td class="thtd thtd--0200 ">0200</td>
      <td class="thtd thtd--feel ">feel</td>
      <td class="thtd thtd--tired ">tired</td>
    </tr>
    <tr>
      <td class="thtd thtd--2018 ">2018</td>
      <td class="thtd thtd--0300 ">0300</td>
      <td class="thtd thtd--sup ">sup</td>
      <td class="thtd thtd--zinc,_mag,_niacn_200mg ">zinc, mag, niacn 200mg</td>
    </tr>
    <tr>
      <td class="thtd thtd--2018 ">2018</td>
      <td class="thtd thtd--0400 ">0400</td>
      <td class="thtd thtd--sup ">sup</td>
      <td class="thtd thtd--zinc,_mag,_niacn_200mg ">zinc, mag, niacn 200mg</td>
    </tr>
    <tr>
      <td class="thtd thtd--2018 ">2018</td>
      <td class="thtd thtd--0500 ">0500</td>
      <td class="thtd thtd--feel ">feel</td>
      <td class="thtd thtd--tired ">tired</td>
    </tr>
    <tr>
      <td class="thtd thtd--2018 ">2018</td>
      <td class="thtd thtd--0630 ">0630</td>
      <td class="thtd thtd--sup ">sup</td>
      <td class="thtd thtd--zinc,_mag,_niacn_200mg ">zinc, mag, niacn 200mg</td>
    </tr>
    <tr>
      <td class="thtd thtd--2018 ">2018</td>
      <td class="thtd thtd--0700 ">0700</td>
      <td class="thtd thtd--sup ">sup</td>
      <td class="thtd thtd--zinc,_mag,_niacn_200mg ">zinc, mag, niacn 200mg</td>
    </tr>
    <tr>
      <td class="thtd thtd--2018 ">2018</td>
      <td class="thtd thtd--0800 ">0800</td>
      <td class="thtd thtd--feel ">feel</td>
      <td class="thtd thtd--tired ">tired</td>
    </tr>
  </tbody>
</table>
 <p>This text should nicely be the same width as the table. If it doesn't happen to be the same width as the table then this is not what I want. I reiterate, as its very important that this paragraph text does indeed wrap at the same width as the table.
</section>

使用Typescript和forwardRef示例进行反应

https://codepen.io/inspiraller/pen/abdZvzM?editors=1111

Answer 4

用相对设置tablels怎么样？

table{
    width:100%;
}

制作一个fiddle，其体宽固定，内部的桌子宽度为100％。

Answer 5

我已添加

table {
 width:19.85em;
}

#wrap p {
    width:19.85em;
}

EM类似于PX，但它们是可扩展的。出于这个原因，我将它们用于几乎所有的东西。我在EMs中找到了表格的宽度（并且为了以防万一），并将其设置为包裹的宽度。如果需要，您可以删除包裹并为提供具有此宽度的类。并且你并不真正需要桌子的宽度为19.85em，但它很好地提醒了或包裹的宽度应该是多少。无论如何，在任何情况下，尝试使用EM而不是PX，因为它们可以扩展。

如何让表格的宽度决定整页的宽度

5 个答案:

结论：

解决方法

设置宽度

使用javascript获取计算表宽度

js

css

html

使用Typescript和forwardRef示例进行反应