Выравнивание таблицы в одной HTML-странице

Question

Это тема, HTML или css. Поэтому, пожалуйста, не оставляйте это, когда я упоминаю «тики». Я считаю, что это можно решить с помощью предположительно простого скрипта css.

На нашей странице в университете я использую платформу Tiki-wiki. Пожалуйста, взгляните на страницу людей. Эта страница состоит из нескольких таблиц, в каждой из которых есть группа людей.

Проблема: В предыдущей версии Tiki все имена на всей странице были выровнены без моего вмешательства. Теперь в новой версии Tiki вы видите, что все имена не выровнены. Каждая таблица имеет собственное расположение имен. Это имеет место, хотя все таблицы имеют точно такие же теги html и CSS-стиль и одинаковые размеры изображений.

Тот факт, что это сработало в предыдущей версии тики, заставило меня поверить, что это ничего, кроме проблемы с дизайном, поскольку темы также были обновлены.

Не могли бы вы рассказать мне, что мне нужно сделать, чтобы исправить это и выровнять все имена? Для каждой таблицы я создал свой собственный div с именем класса «peopletablediv».

Если вам нужна дополнительная информация, пожалуйста, спросите.

PS: Воспроизведение всей страницы не является предпочтительным решением.

Answer 1

Просто добавьте

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

в CSS вашего сайта, и вы сделали.

Answer 2

В CSS можно указать фиксированный размер для TD conaining картинки:

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

Answer 3

Я пытаюсь добавить это в ваш CSS

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

Answer 4

Для HTML решения можно добавить <colgroup> к каждой из таблиц, чуть ниже <table> тег:

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

Таким образом, код таблицы может выглядеть так:

<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

Извините, я не могу добавить комментарий, нет t достаточно «точек», по-видимому, по-видимому, так что это скорее вопрос, чем ответ ...

Какую версию Tiki вы обновили и из? (на днях мы выпустили 4 новых версии) И где «страница людей», извините, я не вижу ссылку.

Если вы обновили от Tiki 12 (скажем) до 13 или 14, то весь каркас изменился на Bootstrap, поэтому для воссоздания предыдущих выступлений (как вы подозревали) может потребоваться дополнительный пользовательский CSS. Не могу точно сказать, что без примера.

Надеюсь, я смогу улучшить свой «ответ», когда у меня будет немного больше информации, спасибо :)