Flüssige und Feste Spalten-Tabelle

Ich habe eine Tabelle auf meinem layout, das hat 5 Spalten, 3 von Ihnen sollten Feste Breite in px und die anderen 2 sollten flüssig.

Es Klang zunächst einfach, aber das problem ist das zwei-fluid-Spalten sollten sich anders Verhalten.

Die Letzte Spalte sollte die Strecke so viel wie Sie können, um den jeweiligen Inhalt anpassen, so dass Sie nie versteckt, aber sollten nicht immer verlassen leeren Raum. Und der mittleren Spalte besetzen sollten alle den freien Raum, den er finden kann, aber auch overflow auf hidden falls der Letzte muss größer werden.

Ich habe versucht, diese Arbeit zu machen mit css, aber ich konnte nicht verwalten, damit es funktioniert... gibt es eine Möglichkeit, dies zu tun mit reinem css oder muss ich js?

BEARBEITEN

Das ist, was ich so weit gekommen:

HTML

<table>
    <tr>
        <td class="fixed">fixed</td>
        <td class="fixed">fixed</td>
        <td class="fluid hidden">fluid</td>
        <td class="fixed">fixed</td>
        <td class="fluid visible">this content should always be visible</td>
    </tr>    
</table>

CSS

table{
   width: 100%;
   table-layout: fixed;
}

td{
    padding: 10px;  
    white-space: nowrap;
}

.fixed{
    background-color: #ddd;
    width: 60px;
}

.fluid{
    background-color: #aaa;
}

.visible{

}

.hidden{
    overflow:hidden;
}

http://jsfiddle.net/KzVbX/

Funktioniert es fast wie erwartet. Mit Ausnahme der letzten Spalte.

Bitte fügen Sie code / jsFiddle
Ist, dass die tatsächliche Tabelle Daten? In anderen Worten, muss es table?
es ist in der Tat, tabellarische Daten.
ich habe nicht wirklich viel zu zeigen... so weit, ich habe nur eine normale Tabelle markup :/
Die Bereitstellung von markup für uns zu kopieren/einfügen, bekommt man die Antwort schneller. Die Eingabe, die alle das erforderliche markup für ein 5-Spalten-Tabelle ist eine ganze Menge Arbeit.
Hurra, eine css-Frage, die eigentlich erklärt, was Sie wollen! Sie zu gewinnen.

InformationsquelleAutor arvere | 2013-09-04

css html

2

Vielleicht kann ich helfen, vielleicht auch nicht.

Erste, würde ich divs anstelle von tr/td. Ich ehrlich don ' T haben ein Bedürfnis für die Verwendung von Tabellen, da CSS eingeführt wurde, und ich bin eher überrascht, dass einige Leute immer noch tun. Aber es könnte ein Grund sein, also bitte nicht als Kritik.

Wenn Sie verwenden divs, dann Bearbeiten Sie diesen Abschnitt des Codes:
```
.visible {
  overflow:visible;
  min-width: 210px;
}
```
Wird, stellen Sie sicher, dass das div-Element mindestens 210 Pixel breit, egal was. Es sollte funktionieren.
BTW, wenn das die einzige Tabelle auf der Seite und das div oder td ist einzigartig in dem Sinne, dass es eine minimale Höhe, dann möchten Sie vielleicht, um die Verwendung einer id statt einer Klasse. Das wird Ihr code sauberer und eleganter.
Hoffe, das hilft.
- Arbeitete für mich. Danke!
InformationsquelleAutor
1

Wenn Sie nicht brauchen, wickeln Sie hierzu:
```
td{
    padding: 10px;  
}
```
Wenn Umbruch gewünscht wird, müssen Sie ändern die Breite der Tabelle auf auto und fügen Sie min-width-parameter.
```
table{
   width: auto;
   min-width: 100%;
   table-layout: fixed;
}
```
InformationsquelleAutor Vladimir Kocjancic

Versuchen, diese und sehen, ob es in der Nähe, was Sie suchen:

DEMO - http://jsfiddle.net/WGpB3/

<table width="100%" border="1" cellspacing="0" cellpadding="0">
    <tr>
            <td style="width:60px;">&nbsp;</td>
            <td style="width:60px;">&nbsp;</td>
            <td style="overflow:hidden;">&nbsp;</td>
            <td style="width:60px;">&nbsp;</td>
            <td style="overflow:visible;">&nbsp;</td>
    </tr>

InformationsquelleAutor Andrew Johnson

0

Änderungen an der CSS-Datei

*DEMO - http://jsfiddle.net/KzVbX/2/
```
table{
   width: 100%;
    table-layout:fixed;
}

td{
    padding: 10px;
}

.fixed{
    background-color: #ddd;
    width: 60px;
}

.fluid{
    background-color: #aaa;
}

.visible{
  overflow:visible;
}

.hidden{
    overflow:hidden;
    max-width:20%;
    white-space:nowrap;
}
```
- noch, in der mittleren Spalte nicht ausblenden überlauf... versuchen Größenänderung und sehen
- Werfen Sie einen Blick auf das Bearbeiten 🙂
- nicht genau noch. es gibt noch verbleibenden leeren Speicherplatz auf der letzten Spalte.. aber danke für deine Hilfe, wenn niemand kommt mit einem Update für das, was wir jetzt haben, es zu tun 😀
InformationsquelleAutor Andrew Johnson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.