Spaltenbreite in einer HTML erzwingen

  • HTML

Es gibt 6 Antworten in diesem Thema. Der letzte Beitrag () ist von Link.

    Spaltenbreite in einer HTML erzwingen

    Hier ein Auszug aus einem html-code, der mir eine Tabelle baut, hier zu sehen nur die Tabellenköpfe.

    <style>
    table#foobar-table thead {
    position: sticky;
    }
    table#foobar-table thead {
    inset-block-start: 0;
    }
    table#foobar-table,
    table#foobar-table > thead > tr > th,
    table#foobar-table > tbody > tr > td {
    border: Solid 1px #888888;
    padding: 5px;
    }
    table#foobar-table > thead > tr {
    background-color: #ED1C29;
    }
    table#foobar-table > tbody > tr:nth-child(even) {
    background-color: #FFFFFF;
    }
    table#foobar-table > tbody > tr:nth-child(odd) {
    background-color: #D5E2E9;
    }
    #foobar-table { margin-left: 1px; }
    }
    </style>
    <p>
    Das angegebene Datum ist das Datum der letzten Teilnahme. Ein Sternchen ("*") signalisiert die Fälligkeit zur Teilnahme oder Auffrischung, also wird sich der Themenverantwortliche demnächst melden. </p><p>Im Tabellenkopf ist jeweils das Thema, der Themenverantwortliche, sowie der nächste Regeltermin aufgeführt. </p><p><label>Filter/Suche: <input type="search" class="filter-table" data-for="#foobar-table" autofocus="autofocus"></label>
    </p>
    <table id="foobar-table">
    <thead>
    <tr>
    <th>
    Nachname
    </th>
    <th>
    Vorname
    </th>
    <th>
    Mitarbeitercode
    </th>
    <th>
    Position
    </th>
    <th>
    Bereich
    </th>
    <th>
    Eintrittsdatum
    </th>
    <th>
    Ersthelfer?
    </th>
    <th>
    Brandschutzhelfer?
    </th>
    <th>
    "01
    PfT-HH"
    <br>
    Max
    <br>
    01.08.2022
    </th>
    <th>
    "02
    Softskills A"
    <br>
    Max
    <br>
    01.08.2022
    </th>
    <th>
    "03
    Arbeitsschutz"
    <br>
    Max
    <br>
    02.08.2022
    </th>
    <th>
    04 Lagerschulung
    <br>
    Max
    <br>
    02.08.2022
    </th>
    <th>
    "05
    Sortimentsübersicht"
    <br>
    Max
    <br>
    02.08.2022
    </th>
    <th>
    "06
    Gevis Vertrieb"
    <br>
    Max
    <br>
    29.08.2022
    </th>
    <th>
    "07
    Gevis Logistik"
    <br>
    Max
    <br>
    30.08.2022
    </th>
    <th>
    "08
    Grundlagen Vertrieb"
    <br>
    Max
    <br>
    04.12.2023
    </th>
    <th>
    "09
    Softskills B"
    <br>
    Max
    <br>
    11.12.2023
    </th>
    <th>
    "10
    Bürokaizen"
    <br>
    Max
    <br>
    02.12.2024
    </th>
    <th>
    "11
    Ersthelfer"
    <br>
    Max
    <br>
    02.02.2023
    </th>
    <th>
    "12
    Brandschutzhelfer"
    <br>
    Max
    <br>
    02.02.2023
    </th>
    </tr>
    </thead>
    </tbody>

    Nun möchte ich Spaltenbreiten erzwingen, das sollte doch eigentlich mit dem Code "width=xxx" zwischen in "<th>" funktionieren oder? Aber irgendwie haut das bei mir nicht hin. Weiß jemand Rat?

    Bsp.:
    <th width=300>Nachname</th>

    Danke für die schnelle Hilfe und den Hinweis, aber passt leider nicht. Damit zerschießt es mir die Tabelle und zählt die Tabellenköpfe auf und drunter dann die einzelnen Zellen.

    Hier nochmal mein kompletter Code:

    Quellcode

    1. <style>
    2. table#foobar-table thead {
    3. position: sticky;
    4. }
    5. table#foobar-table thead {
    6. inset-block-start: 0;
    7. }
    8. table#foobar-table,
    9. table#foobar-table > thead > tr > th,
    10. table#foobar-table > tbody > tr > td {
    11. border: Solid 1px #888888;
    12. padding: 5px;
    13. }
    14. table#foobar-table > thead > tr {
    15. background-color: #ED1C29;
    16. }
    17. table#foobar-table > tbody > tr:nth-child(even) {
    18. background-color: #FFFFFF;
    19. }
    20. table#foobar-table > tbody > tr:nth-child(odd) {
    21. background-color: #D5E2E9;
    22. }
    23. #foobar-table { margin-left: 1px; }
    24. }
    25. </style>
    26. <p>
    27. Im Tabellenkopf ist jeweils das Thema, der Themenverantwortliche, sowie der nächste Regeltermin aufgeführt. </p><p>Das angegebene Datum ist das Datum der letzten Teilnahme. Ein Sternchen ("*") signalisiert die Fälligkeit zur Teilnahme oder Auffrischung, also wird sich der Themenverantwortliche demnächst melden. </p><p><label>Filter/Suche: <input type="search" class="filter-table" data-for="#foobar-table" autofocus="autofocus"></label>
    28. </p>
    29. <table id="foobar-table">
    30. <thead>
    31. <tr>
    32. <th>
    33. Nachname
    34. </th>
    35. <th>
    36. Vorname
    37. </th>
    38. <th>
    39. Mitarbeitercode
    40. </th>
    41. <th>
    42. Position
    43. </th>
    44. <th>
    45. Bereich
    46. </th>
    47. <th>
    48. Eintrittsdatum
    49. </th>
    50. <th>
    51. Ersthelfer?
    52. </th>
    53. <th>
    54. Brandschutzhelfer?
    55. </th>
    56. <th>
    57. "01
    58. PfT-HH"
    59. <br>
    60. Lukas Klotz
    61. <br>
    62. 01.08.2022
    63. </th>
    64. <th>
    65. "02
    66. Softskills A"
    67. <br>
    68. Lukas Klotz
    69. <br>
    70. 01.08.2022
    71. </th>
    72. <th>
    73. "03
    74. Arbeitsschutz"
    75. <br>
    76. Susanne Nötzoldt
    77. <br>
    78. 02.08.2022
    79. </th>
    80. <th>
    81. 04 Lagerschulung
    82. <br>
    83. Susanne Nötzoldt
    84. <br>
    85. 02.08.2022
    86. </th>
    87. <th>
    88. "05
    89. Sortimentsübersicht"
    90. <br>
    91. Tobias Schreiber
    92. <br>
    93. 02.08.2022
    94. </th>
    95. <th>
    96. "06
    97. Gevis Vertrieb"
    98. <br>
    99. Robert Keller
    100. <br>
    101. 29.08.2022
    102. </th>
    103. <th>
    104. "07
    105. Gevis Logistik"
    106. <br>
    107. Paul Redmann
    108. <br>
    109. 30.08.2022
    110. </th>
    111. <th>
    112. "08
    113. Grundlagen Vertrieb"
    114. <br>
    115. Tobias Schreiber
    116. <br>
    117. 04.12.2023
    118. </th>
    119. <th>
    120. "09
    121. Softskills B"
    122. <br>
    123. Lukas Klotz
    124. <br>
    125. 11.12.2023
    126. </th>
    127. <th>
    128. "10
    129. Bürokaizen"
    130. <br>
    131. Robert Keller
    132. <br>
    133. 02.12.2024
    134. </th>
    135. <th>
    136. "11
    137. Ersthelfer"
    138. <br>
    139. Andreas Starke
    140. <br>
    141. 02.02.2023
    142. </th>
    143. <th>
    144. "12
    145. Brandschutzhelfer"
    146. <br>
    147. Andreas Starke
    148. <br>
    149. 02.02.2023
    150. </th>
    151. </tr>
    152. </thead>
    153. </tbody>
    154. <tr><td> Keller </td><td> Robert </td><td> 1636 </td><td> Fachkraft </td><td> Backoffice </td><td> 01.08.2004 </td><td> n </td><td> n </td><td> </td><td> * </td><td> * </td><td> </td><td> * </td><td> </td><td> </td><td> * </td><td> * </td><td> * </td><td> </td><td> </td></tr>
    155. <tr><td> Albrecht </td><td> Peter </td><td> 12 </td><td> Azubi </td><td> FIM </td><td> 01.08.2021 </td><td> n </td><td> n </td><td> * </td><td> * </td><td> * </td><td> * </td><td> * </td><td> </td><td> </td><td> </td><td> * </td><td> * </td><td> </td><td> </td></tr>
    156. </tbody>
    157. </table>
    158. <script>
    159. // HTML-Tabelle filtern
    160. document.querySelectorAll('.filter-table').forEach(function(input) {
    161. var table = document.querySelector(input.dataset.for);
    162. var rows = table.querySelectorAll('tbody tr');
    163. input.addEventListener('input', function(event) {
    164. rows.forEach(function(tr) {
    165. tr.hidden = !tr.textContent.includes(input.value);
    166. });
    167. });
    168. })
    169. </script>



    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „robkel“ ()

    Hi,

    @robkel das Stichwort lautet min-width. Und damit die Tabelle am rechten Ende der Seite nicht verschwindet, sollte noch eine max-width rein und der Inhalt scrollbar gemacht werden.

    Funktionierbares Beispiel anhand deines Codes (insbesondere auch das erste th Element):

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html lang='de'>
    3. <head>
    4. <title>Hello World</title>
    5. <meta charset='UTF-8'>
    7. <style>
    9. /* Einige styles zurücksetzen, sodass ein Browser nicht seine eigene default-magic reinwurschten kann */
    10. * {
    11. padding : 0;
    12. margin : 0;
    13. box-sizing : border-box;
    14. }
    16. html {
    17. font-family : Calibri, Verdana, Arial, sans-serif;
    18. background-color : #f4f4f4;
    19. }
    21. body {
    22. width : 90vw;
    23. margin : 0 auto;
    24. padding : 12px;
    25. background-color : #ffffff;
    26. }
    28. p {
    29. display : block;
    30. margin : 4px 0;
    31. }
    33. label {
    34. display : inline-block;
    35. }
    37. /* max-width damit die Tabelle nicht am Seitenrand verschwindet und overflow auf scroll damit der Inhalt scrollbar ist */
    38. table {
    39. max-width : 100%;
    40. display : block;
    41. overflow : auto;
    42. border-collapse : collapse;
    43. border : 1px solid rgba(0, 0, 0, 0.5);
    44. margin : 12px 0;
    45. }
    47. table#foobar-table thead {
    48. position : sticky;
    49. }
    51. table#foobar-table thead {
    52. inset-block-start : 0;
    53. }
    55. table tr td, table tr th {
    56. padding : 4px;
    57. border : 1px solid rgba(0, 0, 0, 0.5);
    58. }
    60. table#foobar-table,
    61. table#foobar-table > thead > tr > th,
    62. table#foobar-table > tbody > tr > td {
    63. border : Solid 1px #888888;
    64. padding : 5px;
    65. }
    67. table#foobar-table > thead > tr {
    68. background-color : #ED1C29;
    69. }
    71. table#foobar-table > tbody > tr:nth-child(even) {
    72. background-color : #FFFFFF;
    73. }
    75. table#foobar-table > tbody > tr:nth-child(odd) {
    76. background-color : #D5E2E9;
    77. }
    79. </style>
    81. </head>
    83. <body>
    84. <p>
    85. Das angegebene Datum ist das Datum der letzten Teilnahme. Ein Sternchen ("*") signalisiert die
    86. Fälligkeit zur Teilnahme oder Auffrischung, also wird sich der Themenverantwortliche demnächst melden.
    87. </p>
    88. <p>
    89. Im Tabellenkopf ist jeweils das Thema, der Themenverantwortliche, sowie der nächste Regeltermin
    90. aufgeführt.
    91. </p>
    92. <p>
    93. <label>Filter/Suche:
    94. <input type="search" class="filter-table" data-for="#foobar-table" autofocus="autofocus">
    95. </label>
    96. </p>
    97. <table id="foobar-table">
    98. <thead>
    99. <tr>
    100. <th style='min-width:300px;'>
    101. Nachname
    102. </th>
    103. <th>
    104. Vorname
    105. </th>
    106. <th>
    107. Mitarbeitercode
    108. </th>
    109. <th>
    110. Position
    111. </th>
    112. <th>
    113. Bereich
    114. </th>
    115. <th>
    116. Eintrittsdatum
    117. </th>
    118. <th>
    119. Ersthelfer?
    120. </th>
    121. <th>
    122. Brandschutzhelfer?
    123. </th>
    124. <th>
    125. "01 PfT-HH"<br>
    126. Max<br>
    127. 01.08.2022
    128. </th>
    129. <th>
    130. "02 Softskills A"<br>
    131. Max<br>
    132. 01.08.2022
    133. </th>
    134. <th>
    135. "03 Arbeitsschutz"<br>
    136. Max<br>
    137. 02.08.2022
    138. </th>
    139. <th>
    140. 04 Lagerschulung<br>
    141. Max<br>
    142. 02.08.2022
    143. </th>
    144. <th>
    145. "05 Sortimentsübersicht"<br>
    146. Max<br>
    147. 02.08.2022
    148. </th>
    149. <th>
    150. "06 Gevis Vertrieb"<br>
    151. Max<br>
    152. 29.08.2022
    153. </th>
    154. <th>
    155. "07 Gevis Logistik"<br>
    156. Max<br>
    157. 30.08.2022
    158. </th>
    159. <th>
    160. "08 Grundlagen Vertrieb"<br>
    161. Max<br>
    162. 04.12.2023
    163. </th>
    164. <th>
    165. "09 Softskills B"<br>
    166. Max<br>
    167. 11.12.2023
    168. </th>
    169. <th>
    170. "10 Bürokaizen"<br>
    171. Max<br>
    172. 02.12.2024
    173. </th>
    174. <th>
    175. "11 Ersthelfer"<br>
    176. Max<br>
    177. 02.02.2023
    178. </th>
    179. <th>
    180. "12 Brandschutzhelfer"<br>
    181. Max<br>
    182. 02.02.2023
    183. </th>
    184. </tr>
    185. </thead>
    186. <tbody>
    187. <tr>
    188. <td>Keller</td>
    189. <td>Robert</td>
    190. <td>1636</td>
    191. <td>Fachkraft</td>
    192. <td>Backoffice</td>
    193. <td>01.08.2004</td>
    194. <td>n</td>
    195. <td>n</td>
    196. <td></td>
    197. <td>*</td>
    198. <td>*</td>
    199. <td></td>
    200. <td>*</td>
    201. <td></td>
    202. <td></td>
    203. <td>*</td>
    204. <td>*</td>
    205. <td>*</td>
    206. <td></td>
    207. <td></td>
    208. </tr>
    209. <tr>
    210. <td>Albrecht</td>
    211. <td>Peter</td>
    212. <td>12</td>
    213. <td>Azubi</td>
    214. <td>FIM</td>
    215. <td>01.08.2021</td>
    216. <td>n</td>
    217. <td>n</td>
    218. <td>*</td>
    219. <td>*</td>
    220. <td>*</td>
    221. <td>*</td>
    222. <td>*</td>
    223. <td></td>
    224. <td></td>
    225. <td></td>
    226. <td>*</td>
    227. <td>*</td>
    228. <td></td>
    229. <td></td>
    230. </tr>
    231. </tbody>
    232. </table>
    234. <script>
    235. // HTML-Tabelle filtern
    236. document.querySelectorAll('.filter-table').forEach(function (input) {
    237. var table = document.querySelector(input.dataset.for);
    238. var rows = table.querySelectorAll('tbody tr');
    239. input.addEventListener('input', function (event) {
    240. rows.forEach(function (tr) {
    241. tr.hidden = !tr.textContent.includes(input.value);
    242. });
    243. });
    244. })
    245. </script>
    247. </body>
    249. </html>


    Was noch auffällt ist, dass du zwei mal </tbody> drin hast, das erste davon sollte natürlich ein öffnendes Tag sein, also zuerst <tbody> und dann </tbody>.

    Gewöhne dir an, Text nicht mit <br> auszurichten oder Abstände zu machen, sondern benutze simple <div> Container o.ä. und setze die gewünschten Abstände via CSS. Dasselbe gilt für Leerzeichen, hier solltest du stattdessen mit padding, vertical-align oder text-align arbeiten.

    Um in deinen Posts HTML ordentlich zu formatieren, gibt's bereits ein BB-Tag:




    Link :thumbup:
    Hello World

    Dieser Beitrag wurde bereits 7 mal editiert, zuletzt von „Link“ ()