Увеличить в мобильной версии

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

Я хочу: Увеличить в мобильной версии

But it is as:

Увеличить в мобильной версии

Мои коды:

<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>

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

css html-table bootstrap-4

07.04.2019 12:25

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

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

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