0

In The w3.css style plugin, w3-responsive makes a table scrollable in small screens but the table isn't full width any more in medium or large screens.

I'm looking for a solution to have a table both responsive in small screens and full width in large screens.

The image below show my table in a medium screen. as you see it's right aligned and about one third of screen is empty.

note: the full width border belongs to table not a parent element. so table is full width but it's content not.

Image of generated table:

image of generated table

code of table:

<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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Ahmad M
  • 31
  • 5

3 Answers3

1

I found my mistake.

I used "w3-responsive" class directly in my <table> tag. but I should use it in parent <div> as a container for the table.

Ahmad M
  • 31
  • 5
0

Using w3 grid system wont give you a div with 100% width. What you can do is using width: 100% in your div style or css and removing padding and border

more on the w3 grid system:

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

Dev
  • 200
  • 7
0

I see the image_of_a generated_table because and not your code. That's why I assume you are using "w3-container". Please remove "w3-container" and only use w3-responsive. The w3-container class adds a 16px left and right padding to any HTML element.

Your code should look like this:

<!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>
JW Geertsma
  • 857
  • 3
  • 13
  • 19
Asif
  • 166
  • 9
  • Thanks you for your attention and help. With the help of your answer I found my mistake. I used "w3-responsive" class directly in my "" tag. but I should use it in parent "
    " as a container for the table.
     – Ahmad M Sep 04 '21 at 10:23