Suchen
Inside Forum
Nützliche Links




 
phpforum.de bei Facebook
 
phpforum.de bei Twitter
 

Zurück   PHP Forum: phpforum.de > andere (Programmier-)Sprachen > CSS

CSS Alles rund um CSS

Antwort
 
Themen-Optionen Ansicht
  #1  
Alt 12.04.2018, 11:29
mikexmagic mikexmagic ist offline
Besucher
 
Registriert seit: 29.10.2015
Beiträge: 45
Standard Text in Tabelle über Padding-right

Hallo zusammen,

ich baue an einer Tabelle mit fixer Headline und scrollbaren Zeilen. Da es dazu keine allgemeine Lösung gibt, baue ich zwei Tabellen. Die erste nur mit Headline, die zweite mit den Zeilen. Damit das sauber untereinander passt, gebe ich jeder Spalte eine fixe Breite an. Etwa so:
Code:
<td style="width: 200px;">text</td>

td {
overflow: hidden;
display: inline-block;
white-space: nowrap:
padding: 4px 3px;
}


Wenn jetzt der Textinhalt der Zelle größer ist, wird er zwar weder umgebrochen noch bekommt die Zelle Scrollbalken... Aber der Text geht bis zum rechten Rand und ist somit auch innerhalb des rechten Paddings zu sehen... Der Text soll aber vorher enden
Mit Zitat antworten
  #2  
Alt 12.04.2018, 11:58
Don T. Worry Don T. Worry ist offline
Engagierter Besucher
 
Registriert seit: 29.03.2012
Beiträge: 519
Standard AW: Text in Tabelle über Padding-right

Zitat:
ich baue an einer Tabelle mit fixer Headline und scrollbaren Zeilen.
funktioniert display: fixed nicht?
__________________
“Just think of how stupid the average person is, and then realize half of them are even stupider!” [George Carlin]

“There is only one god, and His name is Death. And there is only one thing we say to Death: "not today".” [Syrio Forel]
Mit Zitat antworten
  #3  
Alt 12.04.2018, 12:31
mikexmagic mikexmagic ist offline
Besucher
 
Registriert seit: 29.10.2015
Beiträge: 45
Standard AW: Text in Tabelle über Padding-right

äh, nein ?!
Mit Zitat antworten
  #4  
Alt 20.04.2018, 17:39
p.doblhofer p.doblhofer ist offline
Neuer Besucher
 
Registriert seit: 20.04.2018
Ort: Wien
Beiträge: 1
Standard AW: Text in Tabelle über Padding-right

Hallo,

eine Möglichkeit wäre, innerhalb der Zelle ein weiteres Element einzufügen. Somit bleibt das Padding erhalten und der Text hört davor auf. Mit overflow-x: scroll ist ebenso ein horizontales Scrollen möglich (sofern der Text die Breite überschreitet).

Anbei ein codepen, gleich zum ausprobieren:
https://codepen.io/philipp-doblhofer/pen/OZVQWa

Liebe Grüße
Philipp
Mit Zitat antworten
  #5  
Alt Gestern, 11:17
protestix protestix ist gerade online
Engagierter Besucher
 
Registriert seit: 29.06.2016
Beiträge: 633
Standard AW: Text in Tabelle über Padding-right

Zitat:
Zitat von mikexmagic Beitrag anzeigen
ich baue an einer Tabelle mit fixer Headline und scrollbaren Zeilen. Da es dazu keine allgemeine Lösung gibt, baue ich zwei Tabellen.
Doch es gibt eine allgemeingültige Lösung.
Thead und Tbody bekommen ein display:block verpasst, damit änderst du die Darstellung. Tbody erhält dann ein overflow:auto, und braucht zudem eine feste Höhe als Begrenzung.

Damit die Zellen nicht automatisch anwachsen gibst du denen overflow: hidden; und white-space: nowrap; mit.
Jetzt hält sich der Text aber noch nicht ans padding. Dies erreicht man mit text-overflow und hier mit der Eigenschaft ellipsis, die dann automatisch 3 Punkte erstellt, damit jeder weiiss das der Text gekürzt wurde.

Eine komplette Tabelle mit vergrösserbarem DIV um die Tabelle, damit der Effekt besser verdeutlicht wird folgt nun:

HTML Quellcode:
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tabelle mit Scroll-Effekt</title>
    <style>
    #gemuesetabelle {
        resize: both;
        width: 450px;
        overflow: hidden;
        height: 320px;
    }
    table {
        border-collapse: collapse;
        width: 100%;
        border: 2px dotted brown;
        margin-bottom: 1em;
    }
    
    thead {display: block;}
    td, th{
        text-align:left;
        border: 1px solid brown;
        width: 140px;
        max-width: 160px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding:5px 10px;
    }
    tbody {
        display:block;
        overflow: auto;
        height: 280px;
    }
    </style>
</head>
<body>
    <div id="gemuesetabelle">
        <table>
            <thead>
                <tr>
                    <th>Gemüse
                    </th>
                    <th>Vitamine
                    </th>
                    
                </tr>
            </thead>
            <tbody>
                <tr><td>Artischocke</td><td>C, Biotin, Folsäure</td>
                </tr>
                <tr><td>Aubergine</td><td>C, Folsäure</td>
                </tr>
                <tr><td>Blumenkohl</td><td>C, B1, B6, K, Folsäure, Pantothensäure</td>
                </tr>
                <tr><td>Bohnen</td><td>Biotin, K</td>
                </tr>
                <tr><td>Brokkoli</td><td>A, B1, B2, C, K, Folsäure, Pantothensäure</td>
                </tr>
                <tr><td>Champignons</td><td>B1, B2, D, Pantothensäure</td>
                </tr>
                <tr><td>Chicorée</td><td>A</td>
                </tr>
                <tr><td>Endivie</td><td>A, Folsäure</td>
                </tr>
                <tr><td>Erbsen</td><td>B1, B2, K, Folsäure, Pantothensäure, Biotin</td>
                </tr>
                <tr><td>Feldsalat</td><td>A, Folsäure</td>
                </tr>
                <tr><td>Fenchel</td><td>A, B1, C, E, K</td>
                </tr>
                <tr><td>Grünkohl</td><td>A, C, B1, B2, B6, E, Folsäure</td>
                </tr>
                <tr><td>Gurke</td><td>C, K, Folsäure</td>
                </tr>
                <tr><td>Kartoffeln</td><td>B6, C, K, Folsäure</td>
                </tr>
                <tr><td>Kohlrabi</td><td>C, Folsäure</td>
                </tr>
                <tr><td>Kopfsalat</td><td>A, K</td>
                </tr>
                <tr><td>Kürbis</td><td>A</td>
                </tr>
                <tr><td>Lauch</td><td>B1, B6, C, K, Folsäure</td>
                </tr>
                <tr><td>Mais</td><td>B6, Pantothensäure</td>
                </tr>
                <tr><td>Mangold</td><td>A, B2, C</td>
                </tr>
                <tr><td>Möhren</td><td>A</td>
                </tr>
                <tr><td>Paprika</td><td>A, B6, C, E</td>
                </tr>
                <tr><td>Radieschen</td><td>C, Folsäure</td>
                </tr>
                <tr><td>Rettich</td><td>C, Folsäure</td>
                </tr>
                <tr><td>Rhabarber</td><td>C, K</td>
                </tr>
                <tr><td>Rosenkohl</td><td>B1, B2, B6, Folsäure</td>
                </tr>
                <tr><td>Rote Beete</td><td>C, Folsäure</td>
                </tr>
                <tr><td>Rotkohl</td><td>E, K</td>
                </tr>
                <tr><td>Sauerkraut</td><td>C, B6</td>
                </tr>
                <tr><td>Schwarzwurzel</td><td>B1, E</td>
                </tr>
                <tr><td>Sellerie</td><td>A, B6, K</td>
                </tr>
                <tr><td>Spargel</td><td>B1, C, K, Folsäure, Pantothensäure</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
Mit Zitat antworten
  #6  
Alt Gestern, 15:30
Kasalop Kasalop ist offline
Forum-Mitarbeiter
 
Registriert seit: 29.12.2006
Ort: München
Beiträge: 5.808
Standard AW: Text in Tabelle über Padding-right

@protestix: Das ist aber sehr unschön. Zumindest bei mir im FF sind die spalten nicht wirklich untereinander (also die vom header und vom body). Die Scrollbar schiebt sich seitlich unten den header, beim verkleinern des divs, etc.
Ich glaube nicht das der TE das so meinte
__________________
Es gibt 10 Arten von Menschen auf der Welt. Die die die binäre Mathematik verstehen und die die sie nicht verstehen!

Zu welcher der Gruppen gehörst du?
Mit Zitat antworten
  #7  
Alt Gestern, 17:34
protestix protestix ist gerade online
Engagierter Besucher
 
Registriert seit: 29.06.2016
Beiträge: 633
Standard AW: Text in Tabelle über Padding-right

Habe mich noch mal dran gemacht und es verbessert
Das Verschieben habe ich rausgenommen, da es eh nicht richtig umzusetzen war, daher alles feste Werte für Höhe und Breite.
Das HTML bleibt gleich, daher hier nur das CSS.
HTML Quellcode:
<style>
    #gemuesetabelle {
        width: 316px;
        overflow: hidden;
        height: 320px;
    }
    table {
        border-collapse: collapse;
        width: 100%;
        border: 2px solid brown;
        margin-bottom: 1em;
        font-family: Ariel, Helvetica, sans-serif;
    }
    thead {
        display: block;
    }
    tbody {
        display:block;
        overflow: auto;
        height: 270px;
        border-top: 1px solid brown;
    }
    td, th{
        text-align:left;
        border: 1px solid brown;
        width: 140px;
        max-width: 140px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding:5px 10px;
    }
    th {
        border: 0;
        border-left: 1px solid brown;
    }
    td:first-child, th:first-child {
        width: 110px;
    }
     
    </style>

*getestet mit FF, Opera und Chrome.
Mit Zitat antworten
  #8  
Alt Gestern, 23:00
Kasalop Kasalop ist offline
Forum-Mitarbeiter
 
Registriert seit: 29.12.2006
Ort: München
Beiträge: 5.808
Standard AW: Text in Tabelle über Padding-right

Alternativ... wenn es auch mit etwas javascript sein darf, schau mal bei css-tricks vorbei: https://css-tricks.com/snippets/jque...ers-on-tables/

Lg Kasalop
__________________
Es gibt 10 Arten von Menschen auf der Welt. Die die die binäre Mathematik verstehen und die die sie nicht verstehen!

Zu welcher der Gruppen gehörst du?
Mit Zitat antworten


Antwort

Lesezeichen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.

Gehe zu
Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Reihenfolge Skript-Abarbeitung: Text wird über Tabelle dargestellt GelBaQa PHP 3 27.09.2017 15:39
Text in Tabelle über PHP zentrieren Limits CSS 6 30.11.2013 13:47
Jquery POST -> Soll tabelle erweitern wird aber über Tabelle erstellt der Inhalt ChRoNiK JavaScript 1 28.08.2012 20:31
submit über text-link McGreger PHP 9 20.08.2011 00:42
div über dem Text mangrove CSS 1 31.01.2008 17:38


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:26 Uhr.


Powered by vBulletin® Version 3.8.8 (Deutsch)
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Powered by NuWiki v1.3 RC1 Copyright ©2006-2007, NuHit, LLC