Rozmiar kolumn tabeli nie dopasowuje się do rozmiaru ekranu.

0

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:
886ebd11db.png

Natomiast próba na fizycznym urządzeniu kończy się tak:
9dcad27194.png

Skąd bierze się ta różnica?
Co zrobić aby wymusić poprawne wyświetlanie na telefonie?

1

Spróbuj dodać meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Dobrze jest owinąć tabelę

<div class="table-responsive"> ... tabla ... </div>

Wtedy jak tabela nie będzie mogła być wyświetlona poprawnie cała to zostanie dodany scroll na małych urządzeniach.

1 użytkowników online, w tym zalogowanych: 0, gości: 1