Question

我正在努力将基于Span的表格式化方法替换为表，而我现在占90％。有了这个CSS

table.px_update {
  border-style: none;
  margin-bottom: 2em;
  margin-left: 2em;
  overflow: scroll;
  padding: 0;
  table-layout: fixed;
  width: 50em;
}

table.px_update th {
  border-style: none none solid none;
  padding: 0;
}

table.px_update td {
  border-style: none;
  padding: .5em 0 0 0;
  text-align: left;
  vertical-align: top;
}

table.px_update col.px_update_num {
  width: 9em;
}

table.px_update col.px_update_date {
  width: 5em;
}

table.px_update col.px_update_version {
  width: 5em;
}

table.px_update col.px_update_note {
  width: 30em;
}

<table class="px_update">
  <colgroup>
    <col class="px_update_num">
    <col class="px_update_date">
    <col class="px_update_version">
    <col class="px_update_note">
  </colgroup>
  <tbody>
    <tr>
      <th>NUMBER</th>
      <th>DATE</th>
      <th>VERSION</th>
      <th>Notes</th>
    </tr>
    <tr>
      <td>RVT 2019.1</td>
      <td>31.10.2018</td>
      <td>2019.1.122</td>
      <td>1, 2</td>
    </tr>
  </tbody>
</table>

一切都很宏大，只有两个例外。

虽然“日期”和“版本”列都设置为相同的宽度，但“注释”列要宽得多，但显示屏实际上将“日期”和“注释”显示为窄列，而“版本”则宽得多。当我尝试删除Notes的宽度，但专门为Version设置宽度时，结果是Version和Notes等距间隔。似乎很奇怪。
如果我将浏览器窗口缩小得足够小，则该表将被剪切而不会滚动。我在桌子上尝试overflow:scroll!important;，没有任何变化。我猜是Wordpress主题CSS引起了此问题？还是我不正确理解溢出？

并且，作为一个旁注/问题，一个人如何获得HTML的“运行代码段”？它似乎是一个堆栈溢出功能，而不是指向外部站点的链接，但是我不知道该怎么做？也许只有声誉较高的格式霸主才能进行编辑？

编辑：值得一提的是，我末端有一些继承的CSS，所以标头是合理的。如果此处的标题对齐，则看起来完全符合我的要求，因此似乎是继承的CSS中有某些问题导致了我的问题。希望有人对什么有所了解。

编辑＃2：因此，检查元素表明“版本”列实际上太宽了，并且在Safari检查器中为灰色。 “日期”列的宽度为75px，而“版本”为232，并进行更改。从计算转换为样式我看不出有什么原因。奇怪的是，前面的专栏文章还不错。

编辑＃3：在页面上here仅包含当前有效的HTML。希望可以回顾继承的CSS。我觉得这是SOOOO CLOSE。

Answer 1

问题是，正如您所猜测的那样，文件wp-custom-css.css中有多余的CSS。在第840行，我们看到了

.px_update_date {
  display: inline-block; 
  position: absolute; left: 7em; 
}

因此，您的第二个<col>不再具有表格列的资格，不再具有其默认显示值table-column。解决方案：将其类更改为另一个尚未使用的名称。

第二个问题的答案是，表格不容易滚动。到目前为止，最直接的解决方案是将表放入容器中，并让容器滚动。

.scrollable {overflow:auto;}

<div class="scrollable">

  <table style="width:200%; border:3px outset">
    <tr> <td>Very</td><td>wide</td><td>table</td> </tr>
  </table>
  
</div>

CSS表格式不规则

1 个答案: