Table 在单个 HTML 页面中对齐

Question

这是一个主题，HTML 或 css 问题。所以当我提到 "tiki" 时请不要离开这个。我相信它可以用一个简单的 css 脚本来解决。

在我们的大学页面中，我使用 Tiki-wiki 平台。请查看人员页面。此页面由多个 table 组成，每个页面中都列出了一组人。

问题：在Tiki之前的版本中，整个页面中的所有名称都是对齐的，而无需我的干预。现在在新版本的 Tiki 中，您会看到所有名称都没有对齐。每个 table 都有自己的名字定位。尽管所有 table 都具有完全相同的 html 标记和 css 样式以及完全相同的图像大小，但情况确实如此。

这在以前版本的 tiki 中有效，这让我相信这只是样式问题，因为主题也已更新。

能否请您告诉我如何解决此问题并使所有名称对齐？对于每个 table，我创建了自己的 div，名称为 class "peopletablediv"。

如果您需要任何其他信息，请询问。

PS：重新创建整个页面不是首选解决方案。

Answer 1

在CSS中，您可以为td包含的图片指定一个固定大小：

.wikicell
{
    width: 408px; /* or any convenient value here */
}

Answer 2

只需添加

.peopletablediv .wikitable {
    table-layout: fixed;
}

到您网站的 CSS 就大功告成了。

Answer 3

我会尝试将此添加到您的 CSS

.wikitable > tr > .wikicell:first-child{
    width: 350px;
}

Answer 4

对于 HTML 解决方案，您可以向每个 table 添加一个 <colgroup>，就在 <table> 标记下方：

  <colgroup>
    <col style="width: 380px;" />
    <col colspan="2" />
  </colgroup>

因此 table 代码可能如下所示：

<table class="wikitable table table-striped table-hover">
  <colgroup>
    <col style="width: 380px;">
    <col colspan="2" style="background-color:yellow">
  </colgroup>
  <tbody>
    <tr>
     <td class="wikicell"><a><img width="120" ...></a>
     </td>
     <td colspan="2" class="wikicell">Prof. Dmitry Budker <br><a ...>Send e-mail</a> 
     </td>
    </tr>
  </tbody>
</table>

Answer 5

抱歉，我不能添加评论，显然还不够"points"，所以这更像是一个问题而不是答案...

您升级到哪个版本的 Tiki？（前几天我们发布了 4 个新版本） "the people page" 在哪里，抱歉，我没有看到 link.

如果您从 Tiki 12（比如）升级到 13 或 14，那么整个框架已更改为 Bootstrap，因此可能需要一些额外的自定义 CSS 来重新创建以前的外观（因为您怀疑）。没有例子就无法准确说出是什么。

希望我能在获得更多信息后改进我的 "answer"，谢谢 :)

Table 在单个 HTML 页面中对齐

Table alignment in a single HTML page

html

css

tiki-wiki