Table alignment in a single HTML page

Question

This is a theme, HTML or css issue. So please don't leave this when I mention "tiki". I believe it can be solved with a supposedly simple css script.

In our university page, I use the Tiki-wiki platform. Please take a look at the people page. This page consists of multiple tables, in each, there's a group of people listed.

The problem: In the previous version of Tiki, all names in the whole page were aligned without my intervention. Now in the new version of Tiki, you see that all names are not aligned. Every table has its own positioning of the names. This is the case although all tables have exactly the same html tagging and css styling and exactly same image sizes.

The fact that this worked in the previous version of tiki, made me believe that this is nothing but a styling issue, since themes also were updated.

Could you please tell me what I have to do to fix this and make all names aligned? For each table I created my own div with class name "peopletablediv".

If you require any additional information, please ask.

PS: Recreating the whole page isn't a preferred solution.

Answer 1

Just add

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

to your site's CSS and you're done.

Answer 2

Sorry i can't add a comment, not enough "points" still apparently, so this is more of a question than an answer...

Which version of Tiki did you upgrade to and from? (we released 4 new versions the other day) And where is "the people page", sorry, i don't see a link.

If you upgraded from Tiki 12 (say) to 13 or 14 then the whole framework has changed to Bootstrap so some extra custom CSS may well be needed to recreate previous appearances (as you suspected). Can't really tell exactly what without an example.

Hope i can improve my "answer" when i have a little more info, thanks :)

Answer 3

In the CSS, you can specify a fixed size for the td conaining pictures :

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

Answer 4

I'd try to add this to your CSS

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

Answer 5

For an HTML solution, you could add a <colgroup> to each of the tables, just below the <table> tag:

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

So the table code might look like this:

<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>