CSS Anpassung td auf Zeichenanzahl
Aloa in die Runde,
ich baue mir gerade eine Tabelle auf einer Webseite für intern.
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. ;(
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. ;(
Please also mark the comments that contributed to the solution of the article
Content-ID: 419284
Url: https://administrator.de/contentid/419284
Printed on: December 14, 2024 at 00:12 o'clock
5 Comments
Latest comment
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.
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.
Woran macht der Browser fest wie breit eine Spalte sein soll?
How is column width determined in browserWie 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.