1

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

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

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

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

编辑 2：从概念上讲，我正在寻找的内容可以想象为表格是单独呈现在单独的文档中。然后，将渲染后的表格插入到新文档中，并使用渲染表格的宽度来设置新文档的宽度。因此，最终文档中的任何内容都不会影响表格的呈现，而表格宽度成为决定最终文档宽度的唯一因素。

4

5 回答 5

2
  • 让我们将最初渲染的宽度wrap称为 X。
  • wrap，当最初渲染并且没有指定任何宽度时，将自动填充屏幕上所有可用的水平空间。在这种情况下，文档的整个宽度。因此，在这种情况下，X = 文档的 100%。
  • 如果不指定新的宽度，你不能使 X 小于 100%（除了这里没有用的方法）。
  • 使用 CSS，您可以将table的扩展设为唯一的决定因素wrap，因为它自然会扩展为包含超出 X 的表格。
  • 要将wrapX 缩小到动态值（自然宽度table），您必须使用 Javascript。这意味着将加载文档，然后确定表格宽度 ( var w = $( "table" ).width())，然后将该宽度应用于wrap( $("#wrap").css("width":w))。
于 2013-10-27T16:49:06.930 回答
2

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

我不知道只有在 HTML 和 CSS 中才能做到这一点，所以为任何弄清楚它的人欢呼。我对这个问题很感兴趣，我想知道我是否遗漏了什么。

我相信JavaScript是要走的路。

于 2013-10-27T19:25:08.583 回答
1

我相信这里以前的答案是正确的：treboothjd6。

结论：

这是不可能的。

变通方法

设置宽度

关于表格，这是非常不幸的，在我看来，缺乏 css 解决方案是 css 混乱的主要原因，因为大多数 css 开发人员会为整个表格或其列设置宽度。这可能会导致间距不一致，并且需要在所有进一步的维度上保持严格的严格性。然后对其他所需元素使用相同的宽度以获得更好的设计约束。

使用 javascript 获取计算的表格宽度

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

  1. 使用 javascript 放置类名：例如：.jsEnabled 或使用等效项 -modernizr。
  2. 在您的 css 中，隐藏父类，以防止在先前宽度和所需宽度之间延迟浏览器呈现的闪烁、闪烁、故障。
  3. 在 Javascript 中检测表格的计算宽度。表格可见性是隐藏的，不是没有，所以浏览器仍然可以检测到它的占用宽度。然后使用该宽度动态设置所需的其他元素，即父元素。
  4. 现在使用 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 示例做出反应

于 2020-06-13T04:30:19.603 回答
0

我已经添加

table {
 width:19.85em;
}

#wrap p {
    width:19.85em;
}

EM 类似于 PX，但它们是可扩展的。出于这个原因，我几乎将它们用于所有事情。我在 EM 中找到了表格的宽度（为了以防万一）并将其设置为换行的宽度。如果需要，您可以删除包装并提供<p>具有此宽度的类。而且您实际上并不需要表格的宽度为 19.85em，但它很好地提醒了<p>or wrap 的宽度应该是多少。无论如何，在这种情况下，请尝试使用 EM 而不是 PX，因为它们是可扩展的。

于 2013-10-27T17:06:18.700 回答
0

与亲戚一起设置桌子怎么样？

table{
    width:100%;
}

制作了一个固定身体宽度的小提琴和一个 100% 宽度的桌子。

于 2013-10-27T16:00:44.857 回答