[Resolved] View is not responsive in Smartphone-View

[Author]

Posts

[ThorstenS967]

Hi Nigel,
I use a view to put out a table with all events:
hidden link
In Desktop- and Tablet-View it is responsive, but I have to scroll in Smartphone-View a lot to the right. I tried different things, but nothing changes. The last thing I tried a few minutes ago is this tutorial from W3Schools:
hidden link
I use also Elementor and put the view in a section, which is boxed to 1300 pixels.
This is the code of the view.

<div class="lastUpdated">[custom-posttype-modified]</div>
<div class="container">
[wpv-layout-start]
	[wpv-items-found]
  <div class="table-responsive"> 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col" style="width: 10%; vertical-align:middle">Farbe</th>
      <th scope="col" style="width: 40%; vertical-align:middle">Termin</th>
      <th scope="col" style="width: 40%; vertical-align:middle" >Beschreibung</th>
      <th scope="col" style="width: 10%; vertical-align:middle">Belegt-Status</th>
    </tr>
  </thead>
  <tbody>
	<!-- wpv-loop-start -->
	<wpv-loop wrap="1" pad="true">
		[wpv-item index=1]
		 <tr>
      <td style="vertical-align:middle">[types field='farbe-der-veranstaltung'][/types]</td>
      <td style="vertical-align:middle"><strong>[types field='veranstaltungs-anfang' style='text' format='d.m.Y'][/types] bis [types field='veranstaltungs-ende' style='text' format='d.m.Y'][/types]</strong></td>
      <td style="vertical-align:middle"><a href="[wpv-post-url]">[wpv-post-title]</a><br>[types field='kurzinfo'][/types]<br>[wpv-conditional if="( $(wpcf-ampel-lichter) eq '#f00' )"]
      <span class="ampel-rot-text">Eintrag auf Warteliste möglich.</span>[/wpv-conditional]</td>
      <td style="vertical-align:middle">[types field='ampel-lichter'][/types]</td>
    </tr>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
      </tbody>
</table>
  </div>
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]
</div>

This is my custom CSS:

.ampel-rot-text {
  color: red;
  font-weight: bold;
}

.customBorder {
  border: 1px solid grey;
  margin-bottom: 10px;
  width: 100%;
}

.vertical-align {
    display: flex;
    align-items: center;
}

table.table-bordered{
    border:1px solid black;
    margin-top:20px;
  }

table.table-bordered > thead > tr > th{
    border:1px solid black;
}

table.table-bordered > tbody > tr > td{
    border:1px solid black;
}

thead th, thead td {
  text-align: center;
}
tbody th, tbody td {
  text-align: center;
}

.lastUpdated {
  font-weight: bold;
}

Do you know, why the table in the view isn't responsive in Smartphone-View?

[Nigel]

Hi Thorsten

Tables are notoriously problematic on small screens and if you search you will find dozens of articles on the topic, with solutions that typically involve hiding certain columns on smaller screens where the full table cannot be displayed.

In Bootstrap responsive tables "scroll horizontally on small devices".

See hidden link