✔ Link wie eine Tabelle gestalten mit "<div>"

[jackisback]

Wie Kann ich einen Link so gestalten das dieser sich wie eine Tabelle verhält.
Dabei muss er immer 100% der zu Verfügung stehenden Breite einnehmen. Die einzelnen Bereiche sollen beim maximieren, minimieren des Browsers mitlaufen aber niemals umbrechen.

Hier ist mein erster Versuch.

<a class="mail_list" href="index.php">
<div style="cursor:pointer;  float:left; width:30%">From</div>
<div style="cursor:pointer;  float:left; width:40%">Subject </div>
<div style="cursor:pointer;  float:left">Date</div>
</a>

Meine CSS dazu

a:link.mail_list, a:visited.mail_list, a:focus.mail_list, a:active.mail_list{
border-top:1px solid #6593CF;
width:100%;
height:31; 
font-family:Tahoma; 
font-size:11px; 
color:#3D75C0; 
font-weight:bold;
text-decoration:none; 
display:block; 
margin-top: 0; 
margin-bottom: 0; 
line-height:30px
}

a:link.mail_list 	{}
a:visited.mail_list 	{}
a:focus.mail_list 	{}
a:hover.mail_list 	{ font-weight:bold; text-decoration:none; display:block; font-family:Tahoma; color:#000000; background-color:#E8E9FF}
a:active.mail_list	{}

Hat einer ne Idee?

 

[Maik]

Hi,

versuch es mal mit dem display-Wert table anstelle von block.

Außerdem darf das Inline-Element a keine Block-Elemente, sondern nur Inline-Elemente enthalten, und die div-Elemente müssen daher durch das span-Element ersetzt werden.

 

[jackisback]

Ok danke, was ich gesucht habe ist "table-cell".

<span style="display:table-cell; cursor:pointer; width:200px">

Hat somit geholfen.