CSS table 一边跳一边跳？

Question

我们有一个 CSS table - 由 CSS 和 DIVS 制造。

右侧菜单固定在 20%，这似乎工作正常...

在屏幕中间，我们有一个 table 的 4-5 行信息。 table 的第一行是每列的 link，用于排序。

它只有几行数据（我们稍后会在获得更多数据时添加'pages'）

问题是，当我们select一个link，（SAME排序，或另一种排序-或只是刷新屏幕）时，页面刷新时，中间table "jumps" 向左或向右.. 它不会停留在屏幕上的相同位置并且非常烦人..

table 的内容本身宽度相同 - table 大小不变。但是 table 本身改变了位置...

（尝试 table 顶部的 link）。

有没有办法让 table 是 "fixed" 到可用 space 的 'center' - 通过右侧菜单/右侧栏减少。

当然，随着我添加更多数据/文本 - table 的宽度会增加以应对，但它会保持 'centered'。

我们将来可能会添加一个左侧菜单/div，我们只是在开发这个网站，目前还没有太多可以展示的内容。第一次看到这样的csstable'shift'

Answer 1

这是由于 table-layout 已修复，以及您正在使用 js 添加侧面板这一事实造成的。

您可能应该考虑使用像 bootstrap 这样的 CSS 网格以获得更一致的布局。或者用 display: block, float: left, and widh: x%;

制作你自己的

.column-left, .column-right {
display: block;
width: 20%;
float: left;
}
.column-center {
display: block;
width: 60%;
float: left;
}

或者您可以快速修改 css 修复右侧列并将其绝对定位：

display: block;
width: 20%;
float: left;

Answer 2

我注意到 "messages" 区域是在运行时使用 JavaScript 加载的。

最初div中没有内容:

<div id="messages" style="float:right;  display: inline; width:20%;"></div>

也许你可以尝试在 div 中添加 nbsp; 像这样。这可能会使“20%”宽度起作用。

<div id="messages" style="float:right;  display: inline; width:20%;">&nbsp;</div>

我看到的是，在第一页加载后，table 居中于整个 window，就好像 "messages" div 不存在一样（这是正确的，因为它的内容是在之后加载的）。然后，当 "messages" 的内容存在时，table 居中到剩余宽度。

CSS table jumping side to side ?