Tengo una tabla en Bootstrap la cual no se adapta bien en distintas resoluciones...sobretodo en la sm y xs
Le di a cada columna de la tabla unas columnas de medidas para que el contenido no cambiara el diseño de la tabla, pero no se adapta bien conforme cambio la resolución
<table id="productSizes" class="table">
<thead class="thead-dark">
<tr class="d-flex">
<th class="col-2">Producto</th>
<th class="col-2">Imagen</th>
<th class="des-xs col-6">Descripción</th>
<th class="col-1">Cantidad</th>
<th class="col-1">Precio</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-2 title-producto">PRODUCTO NUMERO UNO</td>
<td class="col-2"><img class="img-thumbnail" src="http://localhost/2019/images/pruebaproducto.jpg" alt=""></td>
<td class="col-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, natus. Dolore architecto iste tempore eveniet voluptatem voluptatum perferendis sunt ex, itaque saepe. Quidem assumenda a aperiam aut sapiente laborum voluptatum.</td>
<td class="col-1">
<form>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
</select>
</div>
</form>
</td>
<td class="col-1 td-precio">60€</td>
</tr>
<tr class="d-flex">
<td class="col-2 title-producto">PRODUCTO NUMERO DOS</td>
<td class="col-2"><img class="img-thumbnail" src="http://localhost/2019/images/pruebaproducto.jpg" alt=""></td>
<td class="cdol-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio facilis harum tempore id dolor, exercitationem amet eius unde, asperiores at consequuntur, cum fugiat esse doloremque molestias ipsa officia ipsum repellendus. Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Quo corporis cupiditate repellendus porro, maiores minus, molestiae omnis corrupti error ullam perferendis laudantium, ratione quidem necessitatibus est. Alias iste tempora doloribus.</td>
<td class="col-1">
<form>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
</select>
</div>
</form>
</td>
<td class="col-1 td-precio">60€</td>
</tr>
<tr class="d-flex">
<td class="col-2 title-producto">PRODUCTO NUMERO TRES</td>
<td class="col-2"><img class="img-thumbnail" src="http://localhost/2019/images/pruebaproducto.jpg" alt=""></td>
<td class="col-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ab, amet perferendis labore porro, voluptatibus vero voluptate assumenda ipsam maiores quibusdam adipisci numquam ratione consectetur omnis officiis, culpa saepe rerum.</td>
<td class="col-1">
<form>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
</select>
</div>
</form>
</td>
<td class="col-1 td-precio">60€</td>
</tr>
</tbody>
</table>
Que se me está pasando ?
d-flex
,thead-dark
,col-2
y demás clases que veo no son parte de bootstrap. ¿No será que estás olvidando definir comocol-md-2
ocol-lg-2
ocol-sm-2
?