Увеличить на мобильном вид - PullRequest
Новая
       18

Увеличить на мобильном вид

1 голос
/ 07 апреля 2019

Как разместить таблицу на мобильном телефоне?

Я хочу: enter image description here

Но это как:

enter image description here

Мои коды: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h2>Text:</h2>
  <table class="table table-bordered table-dark">
    <tbody>
      <tr>
        <td>Name</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text text text text text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
  <a href="" class="btn btn-danger float-left">Select</a><a href="" class="btn btn-success float-right">Go Ahead</a>
</div>

Как разместить таблицу на мобильном экране? Результат для вышеуказанных кодов не читается должным образом, мы должны увеличить его!

1 Ответ

0 голосов
/ 07 апреля 2019

Вы можете изменить с <div class="container"> на <div class="container-fluid">

И добавьте мета viewport для своей страницы. 

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

Вот результат с контейнером-жидкостью

enter image description here

Если вы не хотите использовать container-fluid, вы можете установить в медиа-запросе максимальную ширину 767 пикселей, удалить значения максимальной ширины и установить для поля значение 0 для container class

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...