Блог

Главная - Вопросы по программированию - Как создать полноразмерную и адаптивную таблицу с помощью w3.css

Как создать полноразмерную и адаптивную таблицу с помощью w3.css

#css #w3.css #full-width

Вопрос:

В w3.css w3-адаптивный делает таблицу прокручиваемой на небольших экранах, но таблица больше не имеет полной ширины на средних или больших экранах. Я ищу решение, чтобы таблица была как адаптивной на небольших экранах, так и во всю ширину на больших экранах.

изображение ниже показывает мою таблицу на среднем экране. как вы видите, он выровнен по правому краю, и примерно треть экрана пуста.

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

Изображение сгенерированной таблицы:

изображение сгенерированной таблицы

код таблицы:

 <table id="result" class="w3-table-all w3-hoverable w3-centered w3-card w3-responsive">
<tr>
    <th>index</th>
    <th>date</th>
    <th>product</th>
    <th>variable</th>
    <th>status</th>
    <th>count</th>
    <th>stock</th>
    <th>user</th>
</tr>
<tr id="37172" class="table-data">
    <td>1</td>
    <td>2021/09/04</td>
    <td>something</td>
    <td>yellow</td>
    <td>In</td>
    <td>5</td>
    <td>0</td>
    <td>test</td>
</tr>

Ответ №1:

Использование сетки w3 не даст вам div со 100% шириной. Что вы можете сделать, так это использовать width: 100% в своем стиле div или css и удалить padding и border

подробнее о системе w3 grid:

https://www.w3schools.com/w3css/w3css_responsive.asp

Ответ №2:

Я обнаружил свою ошибку.

Я использовал w3-responsive класс «» непосредственно в своем <table> теге. но я должен использовать его в родительском <div> качестве контейнера для таблицы.

Ответ №3:

Я вижу таблицу image_of_a, созданную потому, что, а не ваш код. Вот почему я предполагаю, что вы используете «w3-контейнер». Пожалуйста, удалите «w3-контейнер» и используйте только w3-отзывчивый. Класс w3-container добавляет 16-кратное левое и правое заполнение к любому HTML-элементу.

Ваш код должен выглядеть следующим образом:

 <!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="">

<h2>Responsive Table</h2>
<div class="w3-responsive">
<table class="w3-table-all">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
  <th>Points</th>
  <th>Points</th>
  <th>Points</th>
  <th>Points</th>
  <th>Points</th>
  <th>Points</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
  <td>50</td>
  <td>50</td>
  <td>50</td>
  <td>50</td>
  <td>50</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
  <td>94</td>
  <td>94</td>
  <td>94</td>
  <td>94</td>
  <td>94</td>
  <td>94</td>
</tr>
<tr>
  <td>Adam</td>
  <td>Johnson</td>
  <td>67</td>
  <td>67</td>
  <td>67</td>
  <td>67</td>
  <td>67</td>
  <td>67</td>
  <td>67</td>
</tr>
</table>
</div>

<div class="w3-panel w3-red">
  <p>A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.</p>
  <p>Resize the screen to see the effect.</p>
</div>

</div>

</body>
</html>

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

1. Спасибо вам за внимание и помощь. С помощью вашего ответа я обнаружил свою ошибку. Я использовал класс «w3-отзывчивый» непосредственно в своем теге «<таблица>». но я должен использовать его в родительском «<div>» в качестве контейнера для таблицы.

Метки: