Change table formatting

I've created a simple table without any formatting on an article page.

As you can see here

http://loosli.karrer4you.ch/index.php/c ... -ueber-uns

are the rows highlighted when you move over with the mouse. Because the table has some vertical information which forms a group, I'd like to have it highlighted in column form.

Where can I do that?

Thx for your help

Here is a better alternative for you.

Replace your table with below.

Code: Select all

<p>
<strong>Mitarbeiter</strong>
</p>
<div class="gkTable col4">
<dl>
<dt>Kajo Krammer</dt>
<dd>Geschäftsführer</dd>
<dd class="gkImage"><img alt="" src="/images/getraenkewelt/Personen/Kajo.jpg"></dd>
<dd></dd>
<dd><a href="mailto:[email protected]?subject=Hello"><img alt="" src="/images/getraenkewelt/Icons/emailButton.png"></a></dd>
</dl>
<dl>
<dt>Susi Sorglos</dt>
<dd>Verkauf</dd>
<dd class="gkImage"><img alt="" src="/images/getraenkewelt/Personen/Kajo1.jpg"></dd>
<dd></dd>
<dd><a href="mailto:[email protected]?subject=Hello"><img alt="" src="/images/getraenkewelt/Icons/emailButton.png"></a></dd>
</dl>
<dl>
<dt>Hans Muster</dt>
<dd>Lager</dd>
<dd class="gkImage"><img alt="" src="/images/getraenkewelt/Personen/Kajo2.jpg"></dd>
<dd></dd>
<dd><a href="mailto:[email protected]?subject=Hello"><img alt="" src="/images/getraenkewelt/Icons/emailButton.png"></a></dd>
</dl>
<dl>
<dt>Peter Meier</dt>
<dd>Einkäufer</dd>
<dd class="gkImage"><img alt="" src="/images/getraenkewelt/Personen/Kajo3.jpg"></dd>
<dd></dd>
<dd><a href="mailto:[email protected]?subject=Hello"><img alt="" src="/images/getraenkewelt/Icons/emailButton.png"></a></dd>
</dl>
</div>


Change email address and subject.

Then add following css code in to css/override.css and enable css override in template settings > advanced settings > css override "on".

Code: Select all

.gkTable:after {clear: both;content: "";display: table;}
.gkTable.col4 dl {float: left;width: 25%;margin: 0 auto;text-align: center;opacity: 0.8;transition: opacity 0.5s ease;}
.gkTable.col4 dl:hover { opacity: 1;}
.gkTable.col4 dl dt { border-bottom:1px solid #EEEEEE; padding-bottom: 10px;}
.gkTable.col4 dl dd { padding: 5px;}


See you around...