Hallo Leute ich hatte ein Frage und zwar
will ich eine Tabelle mit 3 Spalten erstellen.
3. Spalte (Rechte) sollte eine weite von 200px haben.
2. Spalte (Mitte) sollte immer bündig zu erste 1. (Linke) Spalte sein
und in 1. sollten die Texte umbrechen wenn kein platz mehr vorhanden ist.
Ich hab das ganze jetzt programmiert mit CSS und jQuery aller dings funktioniet das ganze nur wenn ich das Fenster verkleinere. Habt ihr eine Idee wie ich das andersrum und beim vergrößern machen kann ? (Siehe Screenshot)
das hier ist mein code
will ich eine Tabelle mit 3 Spalten erstellen.
3. Spalte (Rechte) sollte eine weite von 200px haben.
2. Spalte (Mitte) sollte immer bündig zu erste 1. (Linke) Spalte sein
und in 1. sollten die Texte umbrechen wenn kein platz mehr vorhanden ist.
Ich hab das ganze jetzt programmiert mit CSS und jQuery aller dings funktioniet das ganze nur wenn ich das Fenster verkleinere. Habt ihr eine Idee wie ich das andersrum und beim vergrößern machen kann ? (Siehe Screenshot)
das hier ist mein code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery(".l").each(function(){
var el = jQuery(this);
var w = el.find("span").width();
el.width(w);
});
jQuery(window).resize(function() {
jQuery(".l").each(function(){
var el = jQuery(this);
var w = el.find("span").width();
el.width(w);
console.log(w);
});
});
});
</script>
<style>
.l { border:1px solid red; }
.r { width:200px; border:1px solid red; }
.m { border:1px solid red; }
.m-cont { width:50px; max-width:50px; min-width:50px; }
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="l"><span>Text mit Umbruch</span></td>
<td class="m"><span class="m-cont">Dynamisch</span></td>
<td class="r">Immer 100px</td>
</tr>
</table>
</body>
</html>
