kbs170: Tabellenspaltenbreite dynamisch ändern - mouseover/js-hover/css

Beitrag lesen

SELF-Forum

Tabellenspaltenbreite dynamisch ändern - mouseover/js-hover/css

kbs170
– Informationen zu den Bewertungsregeln

Stecke in die Tabellenspalten zusätzliche Elemente mit display:block, damit das overflow:hidden so funktioniert wie geplant.

Meinst Du das so?
css:

span{  
color:green;  
display:block;  
overflow:hidden;  
}

html:

  
<td><div><span><span>  
	 123456789012345 67890 12345 67890  
</span></span></div></td>

leider auch ohne Erfolge beim firefox!

Bei den Browsern, die :hover auch bei anderen als Linkelementen unterstützen (eine typische Schwachstelle bei älteren IE-Versionen) dürfte es auch allein mit CSS klappen.

Aber firefox unterstützt doch :hover bei allen Elementen? :hover ist schließlich nicht das Problem, sondern die falsche Interpretation von overflow:hidden bei langen string-Ketten ohne Leerzeichen (nur firefox).

Alternativ kannst Du auch die Klasse .hover per JavaScript vergeben. In diesem Fall solltest Du die Events aber mit einem Script verteilen und nicht ins HTML schreiben, bspw.

var tablecells = document.getElementById('aTable').getElementsByTagName('td');
var t = tablecells.length;
while (t--) {
   tablecells[t].onmouseover = function() { this.className = 'hover'; }
   tablecells[t].onmouseout = function() { this.className = ''; }
}

Das ist natürlich noch sehr krude - ggf kannst Du statt der td-Elemente auch gleich die innenliegenden divs nehmen, da auf diese Weise Probleme mit fehlendem Bubbling vermieden werden können.

mit td ging's wunderbar! Danke!

die fertige Version, wie ich es wohl einbauen werde:

  
  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
  <head>  
    <title> test</title>  
    <style type="text/css">  
    <!--  
  
			td{  
			width:30px;  
			border:1px solid black;  
			}  
  
			td div{  
			height:20px;  
			overflow:hidden;  
			}  
			  
			.hover{  
			width:100px;  
			}  
			-->  
		</style>  
  
    <script type="text/javascript">  
			function zelle_verbreitern()  
			{  
				var tablecells = document.getElementById('aTable').getElementsByTagName('td');  
				var t = tablecells.length;  
				while (t--) {  
					 tablecells[t].onmouseover = function() { this.className = 'hover'; }  
					 tablecells[t].onmouseout = function() { this.className = ''; }  
				}  
			}  
		</script>  
  
  </head>  
  <body>  
  
		<table id="aTable" onmouseover="zelle_verbreitern()">  
      <colgroup>  
        <col class="foo" />  
        <col class="foo" />  
        <col class="foo" />  
        <col class="foo" />  
      </colgroup>  
      <tr>  
				<td><div>  
					 12345 67890 12345 67890 12345 67890  
				</div></td>  
				<td><div><span><span>  
					 123456789012345 67890 12345 67890  
				</span></span></div></td>  
				<td><div>  
					 12345 67890 12345 67890 12345 67890  
				</div></td>  
				<td><div>  
					 12345 67890 12345 67890 12345 67890  
				</div></td>  
			</tr>  
			<tr>  
				<td><div>  
					 12345 67890 12345 67890 12345 67890  
				</div></td>  
				<td><div>  
					 12345 67890 12345 67890 12345 67890  
				</div></td>  
				<td><div>  
					 12345 67890 123456789012345 67890  
				</div></td>  
				<td><div>  
					 12345 67890 12345 67890 12345 67890  
				</div></td>  
			</tr>  
		</table>	  
  </body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln