Tabelle Spalte mit null-Breite

Ist es überhaupt möglich?

Ich habe Tabelle, füllt seinen container. (Breite 100%)
Zwei Spalten (1. und 3.) haben eine minimale Breite, aber Mitte nicht.

Wenn ich die Verengung auf das Fenster, ich will den 1. und 3. Spalten bleiben bei minimaler Breite, während die mittlere Spalte haben, um völlig kollabieren (wenn das Fenster zu schmal, nur 1. und 3. Spalten angezeigt werden müssen).

Dank.

Gibt es vereinfachte code, was ich habe:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
.overflow{
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}
.table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.first{
    min-width: 20px;
}
  </style>
</head>

<body>
    <table class="table">
        <tr>
            <td class="first"><div class="overflow">oneoneoneone</div></td>
            <td class="second"><div class="overflow">twotwotwotwo</div></td>
            <td class="first"><div class="overflow">threethreethree</div></td>
        </tr>
    </table>
</body>
</html>
  • Sie können Javascript verwenden, um zu überprüfen, die Breite des Containers ein, und wenn die Breite geht weniger als ein bestimmter Wert, ändern Sie die Breite der zweiten Spalte auf null, oder machen Sie Ihre Sichtbarkeit versteckt. Obwohl putting div innerhalb Tabellen sind nicht als eine gute Praxis, muss ich sagen.
  • Ich bin mir nicht sicher, ob es sein kann, null-Breite, wenn der td hat keine Daten drin.. ich kann mich irren.
  • Ich bin Irre 🙂
  • Benötigen Sie Javascript oder Media queries erkennen die Breite des Containers, und dann könnten Sie einfach tun, einige css wie td:nth-child(2), th:nth-child(2) {display:none;}
  • das ist das, was ich meinte, danke für die syntax:)
  • durch die Verwendung von javascript sollte es wirklich funktionieren (danke für die Idee). Aber gibt es eine Möglichkeit, dies zu tun, nur mit css (für die Fälle, wenn JS deaktiviert ist)? Vielleicht eine Art und Weise, es zu verbergen, zumindest zum Teil, wenn Briefe nicht gesehen werden kann.
  • Ich wüsste auch keinen Beweis, dass. können Sie, bitte, sagen Sie es, wenn Sie getan haben?
  • Ich bin mir ziemlich sicher, Sie können nicht nur mit HTML oder CSS, aber ich habe nicht berücksichtigt, javascript.

InformationsquelleAutor Murval | 2013-11-20
  1. 4

    Könnten Sie tun dies mit einigen grundlegenden CSS-styling & media queries, hier ein Beispiel

    <table border=1>
<thead>
<tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Row 1 Col 1</td>
    <td>Row 1 Col 2</td>
    <td>Row 1 Col 3</td>
</tr>
<tr>
    <td>Row 2 Col 1</td>
    <td>Row 2 Col 2</td>
    <td>Row 2 Col 3</td>
</tr>
<tr>
    <td>Row 3 Col 1</td>
    <td>Row 3 Col 2</td>
    <td>Row 3 Col 3</td>
</tr>
<tr>
    <td>Row 4 Col 1</td>
    <td>Row 4 Col 2</td>
    <td>Row 4 Col 3</td>
</tr>
</tbody>

    <style>
@media only screen and (max-width:500px){
    table td:nth-child(2), table th:nth-child(2)  {
        display:none;
    }
}
</style>

    So, wenn der Bildschirm kleiner als 500 Pixel, die 2. Spalte ausblenden.

    Fiddle zeigt es in Aktion: http://jsfiddle.net/9rEgQ/2/

    • Dies ist der richtige Weg zu gehen. Verwenden Sie nie Javascript, wenn CSS geben kann, die Lösung.
    • Nicht die beste Lösung, die ich erwartet hatte, aber es kann getan werden, auf diese Weise. Danke.
    InformationsquelleAutor MLeFevre
  2. 0

    Könnten Sie CSS verwenden, und ein media-query zu verstecken, in der mittleren Spalte, wenn der Bildschirm reduziert auf eine festgelegte Breite.

    Beispiel:

    @media all and (max-width:500px) {
.second {
display: none;
} 
}

    In diesem Beispiel wird die zweite Spalte nicht angezeigt, wenn der Bildschirm reduziert wurde auf eine Breite von weniger als 500 Pixel

    InformationsquelleAutor Ben Broadley
Schreibe einen Kommentar