Servus Leute,
ich hab hier folgendes Script, womit ich die Spaltenbreite der Tabelle mit der Muas ändern kann. Im Internet Explorer funktioniert es. Nur halt in Firefox nicht. Da ich davon nicht soviel Ahnung habe, frage ich euch.
Ich hoffe ihr könnt mir weiter helfen.
Das Script:
<html>
<head>
<title>Resize Columns</title>
<style type="text/css">
<!--
.resizer {
cursor: e-resize;
}
.tableData {
padding: 3px;
white-space: nowrap;
overflow: hidden;
}
-->
</style>
<script>
var dragStartPos = 0;
var resizing = false;
function startDrag(i){
test=i;
document.onmousemove = dragging;
resizing = true;
if (navigator.appName == 'Netscape') {
theEvent = e;
} else {
theEvent = event;
}
dragStartPos = theEvent.clientX;
return true;
}
function stop(){
resizing = false;
}
function dragging(_test){
document.onmouseup= stop;
if(resizing){
if (navigator.appName == 'Netscape') {
theEvent = e;
} else {
theEvent = event;
}
dragEndPos = theEvent.clientX;
newWidth = parseInt(dragEndPos - dragStartPos) + parseInt(document.getElementById(test).width);
if(newWidth >= 1){
document.getElementById(test).width = newWidth;
dragStartPos = dragEndPos
}
}
return true;
}
</script>
</head>
<body onselectstart='return false'>
<table style="table-layout: fixed;" border="0" cellpadding="0" cellspacing="0" bgcolor="#DDDDDD">
<tr>
<td width="4" bgcolor="#DDDDDD"></td>
<td id="spalte1" width="100" bgcolor="#DDDDDD" class="tableHeader">Author</td>
<td width="4" bgcolor="#DDDDDD" class="resizer" onMouseDown="startDrag('spalte1')"></td>
<td id="spalte2" width="100" class="tableHeader">Title</td>
<td width="4" bgcolor="#DDDDDD" class="resizer" onMouseDown="startDrag('spalte2')"></td>
<td id="spalte3" width="100" class="tableHeader">Date</td>
<td width="4" bgcolor="#DDDDDD" class="resizer" onMouseDown="startDrag('spalte3')"></td>
</tr>
<tr>
<td></td>
<td bgcolor="#FFFFFF" class="cell">
<div class="tableData">Test</div>
</td>
<td></td>
<td bgcolor="#FFFFFF" class="cell">
<div class="tableData">Test</div>
</td>
<td></td>
<td bgcolor="#FFFFFF" class="cell">
<div class="tableData">Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. Test. </div>
</td>
<td></td>
</tr>
</table>
</body>
</html>