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. ;(

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 419284

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

Ausgedruckt am: 26.12.2024 um 13:12 Uhr

5 Kommentare

Neuester Kommentar

Die Breite "Zeichen" gibt es nicht, du kannst bei einer gleichbreiten Schriftart natürlich Zeichen in px umrechnen und diesen Wert einsetzen.

https://stackoverflow.com/questions/1582534/calculating-text-width

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.