• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Breite der Tabellenzellen

Status
Für weitere Antworten geschlossen.
arkadiuszpaluszek

arkadiuszpaluszek

Mitglied
Habe eine Tabelle mit nur einer Zeile. Dabei habe ich zwei Probleme:
1. Die sechs ersten Zellen sollen immer die Breite von 200px haben. Wenn ich das Browserfenster schmäler mache, wird aber die Zellenbreite ggf. verringert, was ich aber nicht will. Wie kann ich es vermeiden?...
2. Die letzte Zelle soll einfach bis zum Browserrand gehen. Schaffe ich aber nicht. Ich habe der Tabelle die Breite von 100% gegeben und anschliessend meinen ersten sieben Spalten von 200px. Die achte Spalte hat keine feste Britenangabe. Ich habe gehofft, dass die letzte Zelle durch die Angabe der Tabellenbreite von 100% automatisch bis zum Rand gehen würde, dem ist aber nicht so. Wie funktioniert es aber dann?

Danke im Voraus für Eure Mühe!
 
Werbung:
Nimm lieber Prozent. Denn 200 x 7 Pixel sind 1400 Pixel und kann auf anderen Geräten schon zu viel sein.
Beispiel mit Pixel
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Navigationselemente</title>
<style>

* {
 margin:0;
 padding:0;
}
html,body {
 width:100%;
}
table {
 width:100%;
 border-collapse:collapse;
 background:#ff0;
}


table td , table th {
 max-width:100px;
 min-width:100px;
 border:1px solid #000;
}

table td:nth-child(8) ,table th:nth-child(8){
 width:100%;
}



</style>
</head>
<body>



<table>
<tr>
<th>1</th>
<th>1</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1t</td>
<td>1e</td>
</tr>

<tr>
<th>1</th>
<th>1</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1t</td>
<td>1e</td>
</tr>

<tr>
<th>1</th>
<th>1</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1t</td>
<td>1e</td>
</tr>
</table>

<!-- Lineal-->
<div style="min-width:102px;float:left;height:10px;background:#f00;"></div>
</body>
</html>
 
arkadiuszpaluszek schrieb:
Die sechs ersten Zellen sollen immer die Breite von 200px haben. Wenn ich das Browserfenster schmäler mache, wird aber die Zellenbreite ggf. verringert, was ich aber nicht will. Wie kann ich es vermeiden?...

Ich habe gehofft, dass die letzte Zelle durch die Angabe der Tabellenbreite von 100% automatisch bis zum Rand gehen würde, dem ist aber nicht so. Wie funktioniert es aber dann?
Zum Vergrößern anklicken....
CSS: 
table{width:100%;table-layout:fixed}
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Tabellenformatierung/table-layout
 
Werbung:
Hallo arkadiuszpaluszek

Du mißbrauchst eine Tabelle zum Layouten. Das ist sachlich falsch und kann nicht funktionieren.

HTML-Tabellen sind ausschließlich für Tabellendaten gedacht. Ihr Verhalten und ihre Darstellung ist dafür ausgelegt, die Tabellendaten möglichst optimal anzuzeigen.

Deshalb verhalten sie sich anders als die meisten anderen HTML-Elemente. Dazu werden viele CSS-Angaben vom Browser "überstimmt". Das ist kein Fehler, sondern für Tabellendaten meist sinnvoll.

Von daher solltest du von Beginn an darauf verzichten Tabellen zum Layouten zu mißbrauchen.

Gruss

MrMurphy
 
@Spicelab - vielen Dank, hat funktioniert!

@MrMurphy - hier geht es um ein Auswahlmenu einer Webapp. Wenn ich mit der Maus über ein Thema (wie z.B. "Kunden") fahre, erscheint dabei drunter ein Untermenu, es ist ein DIV, dessen Sichtbarkeit beim Mouseover und Mouseout - Event der jeweiligen Tabellenzelle geändert wird. Mein Problem bestand darin, dass bei der Veränderung der Tabellenzellenlänge die Untermenus plötzlich nicht mehr unter den zu ihnen gehörenden Überpunkten waren. Jetzt funktioniert es aber!
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben