Блог

Главная - Вопросы по программированию - Таблица начальной загрузки в полноэкранном режиме

Таблица начальной загрузки в полноэкранном режиме

#javascript #php #html

Вопрос:

Я совершенно новичок в платформе веб — приложений. Я просто хочу, чтобы моя таблица данных отображалась на весь экран

введите описание изображения здесь

Комментарии:

1. Пожалуйста, предоставьте образцы вашего кода, чтобы дать точное решение, так как невозможно дать решение только с изображением

Ответ №1:

Короткий ответ-удалить любые отступы и / или поля (которые установлены в качестве стандартных в начальной загрузке). Затем в таблице убедитесь, что вы задаете высоту и ширину страницы, используя классы vh-x и vw-x. Это приведет к тому, что размер таблицы будет таким же, как у окна просмотра.

 <div class="container p-0 m-0">         
  <table class="table table-dark table-hover vw-100 vh-100">

Вот скрипка JS, чтобы вы могли видеть, что происходит…
https://jsfiddle.net/fatchild/hdgbyzn9/18/

Полный пример кода…

 <!DOCTYPE html> <!--HTML5 DOCTYPE-->
<html lang="en">
  <head>
    <title>Bootstrap 4 Template</title>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!--viewport for mobile first design-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>

<!-- CONTAINER -->

    <div class="container p-0 m-0">         
      <table class="table table-dark table-hover vw-100 vh-100">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>
    </div>

  </body>
</html>

Полезные Документы…
https://getbootstrap.com/docs/4.4/utilities/sizing/

Было бы неплохо поделиться своим кодом в вопросе, чтобы мы могли помочь более эффективно.

Ответ №2:

 <div class="container-fluid">
  <div class="row">
    <div class="col">
      <table>
        ..........
      </table>
    </div>
  </div>
</div>

Привет, друг..
если я не понимаю ваш вопрос, вы должны попробовать это

Ответ №3:

Вы должны сделать так, чтобы за вашим столом было width по крайней 100% мере .

 <link href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"/>

<table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            </tbody>
            
            </table>
Метки: