1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Bootstrap table ab bestimme weite untereinander.

Dieses Thema im Forum "HTML & XHTML" wurde erstellt von Kent94, 31. Januar 2016.

  1. Kent94

    Kent94 Mitglied

    Heyho,

    Ich habe ein kleines Problem und zwar habe ich eine Tabelle mit mehren Produkte dieser beinhaltet 4 Tds

    Icon, Name, Preis, Bestell Button.

    Wenn ich die Seite etwas minimiere fängt er an das table zu quetschen sobald ich allerdings mobil oder sie stark Minimire zeigt er mir diese untereinander an nun ist meine Frage wie kann ich es einstellen das ich selbst bestimmen kann ab wann er runter geht dachte mir ab max-width: 1200px

    Code der Tabelle

    HTML:
    1. <div class="row">
    2.   <div class="col-md-4">
    3. <ul style="font-size: 12px; font-weight: bold; color: rgb(48, 54, 65); line-height: 16px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
    4.   <li
    5. style="border: 1px solid rgb(204, 204, 204);  background: rgb(255, 255, 255) none repeat scroll 0px; height: 55px; list-style-type: none; list-style-image: none; list-style-position: outside; margin-bottom: 5px;  -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">
    6. <table class="table" style="font-size: 2px; position: relative;  top: 10px; margin: 0 auto; text-align: left; min-width: 98%;" border="0" cellpadding="2" cellspacing="2">
    7.   <thead>
    8.     <tr>
    9.       <th scope="row"><img src="themes/test/images/game/7.jpg" alt=""></th>
    10.       <td style="width: 110px;">7 DAYS TO DIE</td>
    11.       <td>ab 4,45 &euro; / Slot</td>
    12.       <td style="text-align: right;"><a style="font-size:12px;" class="btn btn-success" href="modules.php?name=store&op=details&ids=150"> Bestellen</a></td>
    13.  
    14.     </tr>
    15.   </thead>
    16. </ul>
    17.     </div>
    18.   <div class="col-md-4">
    19. <ul style="font-size: 12px; font-weight: bold; color: rgb(48, 54, 65); line-height: 16px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
    20.  
    21.   <li
    22. style="border: 1px solid rgb(204, 204, 204);  background: rgb(255, 255, 255) none repeat scroll 0px; height: 55px; list-style-type: none; list-style-image: none; list-style-position: outside; margin-bottom: 5px;  -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">
    23. <table style="font-size: 2px; position: relative;  top: 10px; margin: 0 auto; text-align: left; min-width: 98%;" border="0" cellpadding="2" cellspacing="2">
    24.   <thead>
    25.   </thead>
    26.   <tbody>
    27.     <tr>
    28.       <th scope="row"><img src="themes/test/images/game/ark.jpg" alt=""></th>
    29.       <td style="width: 110px;">ARK: SURVIVA</td>
    30.       <td>ab 4,45 &euro; / Slot</td>
    31.       <td style="text-align: right;"><a style="font-size:12px;" class="btn btn-success" href="modules.php?name=store&op=details&ids=169"> Bestellen</a> </td>
    32.     </tr>
    33.   </tbody>
    34. </ul>
    35.     </div>
    36.   <div class="col-md-4">
    37. <ul style="font-size: 12px; font-weight: bold; color: rgb(48, 54, 65); line-height: 16px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
    38.  
    39.   <li
    40. style="border: 1px solid rgb(204, 204, 204);  background: rgb(255, 255, 255) none repeat scroll 0px; height: 55px; list-style-type: none; list-style-image: none; list-style-position: outside; margin-bottom: 5px;  -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;">
    41. <table style="font-size: 2px; position: relative;  top: 10px; margin: 0 auto; text-align: left; width: 98%;" border="0" cellpadding="2" cellspacing="2">
    42.   <thead>
    43.   </thead>
    44.   <tbody>
    45.     <tr>
    46.       <th scope="row"><img src="themes/test/images/game/arma.png" alt=""></th>
    47.       <td style="width: 110px;">ARMA III</td>
    48.       <td>ab 6,23 &euro; / Slot</td>
    49.       <td style="text-align: right;"><a style="font-size:12px;" class="btn btn-success" href="modules.php?name=store&op=details&ids=100"> Bestellen</a></td>
    50.     </tr>
    51.   </tbody>
    52. </ul>
    53. </div>
    vielen Dank schon einmal für eure Hilfe.

    Gruß Kent94
     
  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

  3. Kent94

    Kent94 Mitglied

    Hallo,
    Danke für deine Antwort leider wenn ich es ein bisschen Minimiere quetscht er es immer noch mobil sowie bei voller Minimierung wird es unter einander angezeigt aber er soll ja schon ab z.b 1200 px minimieren und nicht erst bei voller Minimierung.
     
  4. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Dann eben so:
    Code (HTML5):
    1. <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12"><!-- gilt für alle drei <div> -->
     
  5. Kent94

    Kent94 Mitglied

    Hallo, Perfekt klappt habe nur jetzt ein Problem wenn er komplett Minimiert ist steht nix mehr im table ? :eek:
     
  6. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Kann ich bei mir lokal nicht reproduzieren.

    Aber font-size:2px ist schon arg klein gewählt :D
     
Die Seite wird geladen...