單個HTML頁面中的表格對齊方式

這是一個主題，HTML或CSS問題。所以當我提到「tiki」時請不要離開這個。我相信它可以用一個簡單的css腳本解決。單個HTML頁面中的表格對齊方式

在我們的大學頁面中，我使用了Tiki-wiki平臺。請看看人物頁面。此頁面由多個表格組成，每個表格中都列出了一組人員。

問題：在以前的Tiki版本中，整個頁面中的所有名字都沒有我的介入而被調整。現在在Tiki的新版本中，您會看到所有名稱都沒有對齊。每張桌子都有自己的名字定位。雖然所有表格都具有完全相同的HTML標記和CSS樣式，並且圖像大小完全相同，但情況也是如此。

事實上，這在以前的tiki版本中工作，使我相信這只是一個造型問題，因爲主題也被更新。

請問我需要做些什麼來解決這個問題，並使所有名稱對齊？對於每個表格，我都創建了自己的類，名稱爲「peopletablediv」。

如果您需要任何其他信息，請詢問。

PS：重新創建整個頁面不是首選解決方案。

來源

2015-05-27 The Quantum Physicist

只需添加

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

到您的網站的CSS，即可大功告成。

來源

2015-05-27 09:13:26 connexo

在CSS，你可以爲TD conaining圖片指定一個固定的大小：

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

來源

2015-05-27 09:12:16

這不會幫助。兩個TD單元都有這個類 – mikeyq6

這並不是一個好主意。該名稱也駐留在「td.wikicell」中。 – connexo

我會嘗試把它添加到您的CSS

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

來源

2015-05-27 09:14:27 Razieltje

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

來源

2015-05-27 09:17:29 mikeyq6

對不起，我無法添加評論， t足夠的「點」仍然顯然，所以這是一個問題比答案更多...

你升級到哪個版本的Tiki？（我們前幾天發佈了4個新版本）「人員頁面」在哪裏，對不起，我沒有看到鏈接。

如果您從Tiki 12（比如說）升級到13或14，那麼整個框架已經更改爲Bootstrap，因此可能需要一些額外的自定義CSS來重新創建以前的外觀（如您所懷疑的那樣）。沒有一個例子就無法確切地說出什麼。

希望我可以提高我的「答案」，當我有一點信息，謝謝:)

來源

2015-05-28 00:15:36 jonnybradley

從12.3到14這個問題可以通過connexo提供的答案來解決。 –

單個HTML頁面中的表格對齊方式

回答

相關問題