Witam.
Mam zrobiony w Bootstrapie wiersz, w nim trzy kolumny, w każdej kolumnie jedna tabelka. Kolumy są oznaczone klasą
col-lg-4
, aby na małym urządzeniu(smartfon) wyświetlały się jedna pod drugą. Oto kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top: 2%;">
<div class="col-lg-4">
<table class="table table-hover table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Lorem</th>
<th>ipsum</th>
<th>dolor</th>
</tr>
</thead>
<tbody>
<tr>
<td>sit</td>
<td>amet</td>
<td>consectetur</td>
</tr>
<tr>
<td>adipiscing</td>
<td>elit</td>
<td>Suspendisse</td>
</tr>
<tr>
<td>consequat</td>
<td>lobortis</td>
<td>pretium</td>
</tr>
<tr>
<td>Aenean</td>
<td>mattis</td>
<td>nisi</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4">
<table class="table table-hover table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Lorem</th>
<th>ipsum</th>
<th>dolor</th>
</tr>
</thead>
<tbody>
<tr>
<td>sit</td>
<td>amet</td>
<td>consectetur</td>
</tr>
<tr>
<td>adipiscing</td>
<td>elit</td>
<td>Suspendisse</td>
</tr>
<tr>
<td>consequat</td>
<td>lobortis</td>
<td>pretium</td>
</tr>
<tr>
<td>Aenean</td>
<td>mattis</td>
<td>nisi</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4">
<table class="table table-hover table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Lorem</th>
<th>ipsum</th>
<th>dolor</th>
</tr>
</thead>
<tbody>
<tr>
<td>sit</td>
<td>amet</td>
<td>consectetur</td>
</tr>
<tr>
<td>adipiscing</td>
<td>elit</td>
<td>Suspendisse</td>
</tr>
<tr>
<td>consequat</td>
<td>lobortis</td>
<td>pretium</td>
</tr>
<tr>
<td>Aenean</td>
<td>mattis</td>
<td>nisi</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Kiedy testuję responsywność strony poprzez http://testrwd.pl/, lub po prostu skalowanie okna przeglądarki, rozmiar kolumn tabeli dopasowuje się do rozmiaru urządzenia:
Natomiast próba na fizycznym urządzeniu kończy się tak:
Skąd bierze się ta różnica?
Co zrobić aby wymusić poprawne wyświetlanie na telefonie?