h41msh1c0r
Feb 19, 2019, updated at 07:05:04 (UTC)
view3433
view5
0
Goto Top

CSS Anpassung td auf Zeichenanzahl

GermansolvedQuestionCSSDevelopment
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. ;(
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 419284

Url: https://administrator.de/contentid/419284

Printed on: April 25, 2024 at 10:04 o'clock

5 Comments
Latest comment
Goto Top
Member: falscher-sperrstatus
falscher-sperrstatus Feb 19, 2019 at 07:05:19 (UTC)
Goto Top
Die Breite "Zeichen" gibt es nicht, du kannst bei einer gleichbreiten Schriftart natürlich Zeichen in px umrechnen und diesen Wert einsetzen.
Mitglied: 138810
Solution 138810 Feb 19, 2019 at 08:02:37 (UTC)
Goto Top
https://stackoverflow.com/questions/1582534/calculating-text-width
Member: cnelke
Solution cnelke Feb 19, 2019 at 08:07:23 (UTC)
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.
Mitglied: 138810
Solution 138810 Feb 19, 2019 updated at 12:49:05 (UTC)
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.
Member: H41mSh1C0R
H41mSh1C0R Feb 19, 2019 at 13:04:00 (UTC)
Goto Top
Danke danke für die vielen Anregungen.

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

*Frühschicht Ende* ^^
GermansolvedQuestionCSSDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 Comments