Stop eine einzelne Tabellenzelle davon ab, die Tabellenbreite zu bestimmen

Question

A    B
A    B
A    X
A    B

Ich habe eine Tabelle innerhalb eines enthaltenden Blocks mit einer festgelegten Breite von 400px. Wenn die Browserbreite kleiner als 421px ist, wechselt die Breite des enthaltenden Blocks auf 95%. Zellen vom Typ "A" und "B" enthalten einfachen Text. Es gibt eine einzelne Zelle, die einen Link mit white-space:nowrap enthält.

Ich benötige, dass die Tabelle ihre Abmessungen selbst bestimmt (also kein table-layout:fixed-width), aber keine Zelle "X" berücksichtigt, wenn sie die Breite der zweiten Spalte bestimmt. Es ist in Ordnung, den Inhalt von Zelle "X" zu verbergen, der nicht passt.

Ich habe versucht, width:100% mit overflow hidden auf allen möglichen verschiedenen Elementen anzuwenden, aber ohne Erfolg.

html

                monat
                datum

        zusammenfassung

        Kalender

        Datum
        datum

        Startzeit
        zeit

        Endzeit
        zeit

        Ort
        ort

        Anhang
        link

        Beschreibung
        lange beschreibung

scss

table{  
    width:100%;
    margin:1em 0;
    th{
        color:$c_modal;
        text-align:right;
        font-size:.85em;
        padding: 3px;
        vertical-align:top;
        &.space{
            padding-top:1em;
        }
        figure{
            float:right;
            margin:0;
            .minical-mo{
                width:60px;
                height:15px;
                font-size:11px;
                line-height:15px;
                text-align:center;
                color:white;
                background-color:$c_main;
            }
            .minical-da{
                width:60px;
                height:45px;
                font-size:35px;
                line-height:45px;
                text-align:center;
                color:black;
                background-color:white;
                border-radius:0 0 5px 5px;
                -webkit-box-shadow: 0 5px 12px -5px $c_dk;
                -moz-box-shadow: 0 5px 12px -5px $c_dk;
                box-shadow: 0 5px 12px -5px $c_dk;
            }
        }   
    }
    td{
        color:black;
        font-size:.85em;
        padding:3px;
        vertical-align:top;
        &.space{
            padding-top:1em;
        }
        p{
            margin-bottom:1em;
            line-height:1.2;
        }
        &.link{
            overflow:hidden;
            a{
                                    width:100%;
                overflow:hidden;
            }
        }
    }
}

Answer 1

Stellen Sie sicher, dass folgendes auf das .link Element angewendet wird.

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:100px; /* nach Bedarf anpassen */

Dadurch wird der Link abgeschnitten, wenn er zu lang ist, und am Ende mit ... gefüllt.

Answer 2

Ich habe ein ähnliches Problem gelöst, indem ich die tatsächliche Größe des Textstrings begrenzt und dann den vollständigen Text im Tooltip platziert habe. Der Blog-Beitrag ist HIER.

Answer 3

Verstanden

td.link{
    overflow:hidden;
}
td.link a{
    display:block;
    overflow:visible;
    max-width:10px;
    white-space:nowrap;             
}

Platzieren Sie eine maximale Breite auf den Anker, um zu verhindern, dass er die Spaltenbreite für seine Spalte beeinflusst, und erlauben Sie dann, dass sein Überlauf sichtbar ist. Dann den Überlauf in der Tabellenzelle ausblenden.

Das Einzige Schlechte an dieser Lösung ist, dass text-overflow:ellipsis nicht funktioniert, weil wir den Blocküberlauf ausblenden und nicht den Textüberlauf. Ein Opfer, mit dem ich in diesem Fall zufrieden bin.

Wenn jemand einen Weg findet, text-overflow hiermit zum Laufen zu bringen, lassen Sie es mich wissen.

Vielen Dank für alle Vorschläge.