h41msh1c0r
Goto Top

CSS Anpassung td auf Zeichenanzahl

Aloa in die Runde,

ich baue mir gerade eine Tabelle auf einer Webseite für intern.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>

<Title> Liste </Title>

<style>
th {
	text-align: center;
	background-color: lightblue;
	color: black;
	height: 20px;
	padding: 5px;
}
table {width:100%;}

tr td{
	height: 20px;
    	background-color:lightgray;
	border-bottom-width: 1px;
	border-bottom-color: black;
	width: 100px;
}

tr td:nth-child(10) {
    	text-align:right;
	width:350px;
}

[tooltip]{
  position:relative;
}

[tooltip]::before {
    content: "";  
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.7) transparent transparent     transparent;
    z-index: 99;
    opacity:0;
}

[tooltip-position='buttom']::before{  
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}

[tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left:50%;
    top:-6px;
    transform: translateX(-50%)   translateY(-100%);
    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff;
    font-size: 12px;
    min-width: 180px;
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;
}

[tooltip]:hover::after,[tooltip]:hover::before {
   opacity:1
}
</style>

</head><body>
<table>
<colgroup><col/><col/><col/><col/><col/><col/><col/><col/><col/><col/></colgroup>
<tr><th>Produktname</th><th>Version</th><th>PV</th><th> 

Verfahren</th><th>Gruppe</th><th>Bedarf</th><th>Schritt</th><th>Datum</th><th>Bereitstellung</th><th>Beschreibung</th></tr>

<tr><td tooltip="test7zip" tooltip-position="buttom">7-Zip</td><td>18.0.5, 64 Bit</td><td>Mustermann,   

Peter</td><td></td><td></td><td></td><td>Fertig</td><td>10/07/2018</td><td>Share</td><td tooltip="Anwendung zum Packen von Dateien" tooltip-  

position="buttom">Packprogramm</td></tr>  

</table>
</body></html>

Woran macht der Browser fest wie breit eine Spalte sein soll?
Die Tabelle ist auf 100% in der Breite angegeben. --> Check
Die letzte Spalte kann ich auch fix setzen. --> Check
Setzen der Breite für alle anderen td's geht auch --> Check.

Fragen:
Wie kann ich die td auf sagen wir 20 Zeichen begrenzen?
Nicht nur auf % oder Pixel?

VG

EDIT:
https://www.w3schools.com/tags/att_td_width.asp

Scheint nur % und Pixel zu geben als Attribut. ;(

Content-ID: 419284

Url: https://administrator.de/forum/css-anpassung-td-auf-zeichenanzahl-419284.html

Ausgedruckt am: 26.12.2024 um 13:12 Uhr

certifiedit.net
certifiedit.net 19.02.2019 um 08:05:19 Uhr
Goto Top
Die Breite "Zeichen" gibt es nicht, du kannst bei einer gleichbreiten Schriftart natürlich Zeichen in px umrechnen und diesen Wert einsetzen.
138810
Lösung 138810 19.02.2019 um 09:02:37 Uhr
Goto Top
cnelke
Lösung cnelke 19.02.2019 um 09:07:23 Uhr
Goto Top
Hier ein Artikel mit allen Maßeinheiten:

https://t3n.de/news/css-maseinheiten-pixel-hinaus-466189/3/

Die Einheit ch könnte Dir eventuell weiter helfen, wobei man bedenken sollte, dass das ziemlich sicher nicht in allen Browsern zum gewünschten Ergebnis führt.
Ich habe diese Einheit selbst noch nicht verwendet, daher keine Gewähr für meine Aussage.
Wenn es typografisch in Ordnung ist, nimm eine Konsolenschriftart. Dann kannst Du die Breite ja einfach berechnen.
138810
Lösung 138810 19.02.2019 aktualisiert um 13:49:05 Uhr
Goto Top
Woran macht der Browser fest wie breit eine Spalte sein soll?
How is column width determined in browser
Wie kann ich die td auf sagen wir 20 Zeichen begrenzen?
Mit JavaScript die tatsächliche Breite ermitteln (z.B. Wie oben mit JQuery) und damit dann den Style festlegen.
H41mSh1C0R
H41mSh1C0R 19.02.2019 um 14:04:00 Uhr
Goto Top
Danke danke für die vielen Anregungen.

Wühl mich da morgen durch, wenn die Prio's besser stehen. =)

*Frühschicht Ende* ^^