# Bootstrap table ab bestimme weite untereinander.



## Kent94 (31. Januar 2016)

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 


```
<div class="row">
  <div class="col-md-4">
<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;">
  <li
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;">
<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">
  <thead>
    <tr>
      <th scope="row"><img src="themes/test/images/game/7.jpg" alt=""></th>
      <td style="width: 110px;">7 DAYS TO DIE</td>
      <td>ab 4,45 &euro; / Slot</td>
      <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>

    </tr>
  </thead>
</table>
</ul>
    </div>
  <div class="col-md-4">
<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;">

  <li
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;">
<table style="font-size: 2px; position: relative;  top: 10px; margin: 0 auto; text-align: left; min-width: 98%;" border="0" cellpadding="2" cellspacing="2">
  <thead>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><img src="themes/test/images/game/ark.jpg" alt=""></th>
      <td style="width: 110px;">ARK: SURVIVA</td>
      <td>ab 4,45 &euro; / Slot</td>
      <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>
    </tr>
  </tbody>
</table>
</ul>
    </div>
  <div class="col-md-4">
<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;">

  <li
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;">
<table style="font-size: 2px; position: relative;  top: 10px; margin: 0 auto; text-align: left; width: 98%;" border="0" cellpadding="2" cellspacing="2">
  <thead>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><img src="themes/test/images/game/arma.png" alt=""></th>
      <td style="width: 110px;">ARMA III</td>
      <td>ab 6,23 &euro; / Slot</td>
      <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>
    </tr>
  </tbody>
</table>
</ul>
</div>
```

vielen Dank schon einmal für eure Hilfe.

Gruß Kent94


----------



## SpiceLab (31. Januar 2016)

Schau es Dir mal hiermit an:

```
<div class="col-md-4 col-sm-12 col-xs-12"><!-- gilt für alle drei <div> -->
```
http://getbootstrap.com/css/#grid-example-mixed-complete


----------



## Kent94 (31. Januar 2016)

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.


----------



## SpiceLab (31. Januar 2016)

Dann eben so:

```
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12"><!-- gilt für alle drei <div> -->
```


----------



## Kent94 (31. Januar 2016)

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


----------



## SpiceLab (31. Januar 2016)

Kent94 hat gesagt.:


> habe nur jetzt ein Problem wenn er komplett Minimiert ist steht nix mehr im table ?


Kann ich bei mir lokal nicht reproduzieren.

Aber *font-size:2px* ist schon arg klein gewählt


----------

