Table not getting Responsive bootstrap 4

Asked

Viewed 885 times

0

I’m venturing into the frontend just like the backend. I’m having a hard time making my table responsive. What is the best way to make a user profile,leaving it in cell phone size?

inserir a descrição da imagem aqui

<table class="table-sm rob" cellpadding="3">
    <thead>
      <tr>
        <th>
          <img src="{{ form1.avatar(180) }}" alt="" class="img-rounded img-sm" />
        </th>
        <th>
          <h4>{{ form1.first_name }} {{ form1.last_name }}</h4>
          <p>Sobre :{% if form1.about_me %}
            {{ form1.about_me }}
            {% endif %}</p>
           <p> {{ form1.email }}</p>
            Grau: {{ form1.grau }}
            {% if form1.last_seen %}
            Última visita: {{ form1.last_seen.strftime('%d/%m/%Y %H:%M:%S') }}</i>
            {% endif %}
          </p>
          <div class="btn-group">
            <a class="btn-sm btn-primary" href="{{ url_for('edit_profile') }}" role="button"
              style="width: 130px; height: 50px">Edita Perfil</a>
            <a class="btn-sm btn-secondary"
              href="https://wordpress.com/log-in/pt-br?client_id=1854&redirect_to=https%3A%2F%2Fpublic-api.wordpress.com%2Foauth2%2Fauthorize%3Fclient_id%3D1854%26response_type%3Dcode%26blog_id%3D0%26state%3D39ad9d7e0e4eb19f951dce539ce091bd328c8d9660bcc1b2eaa182c8603b95ff%26redirect_uri%3Dhttps%253A%252F%252Fen.gravatar.com%252Fconnect%252F%253Faction%253Drequest_access_token"
              role="button" target="_blank" style="width: 130px; height: 50px">Trocar Avatar</a>
          </div>
        </th>
      </tr>
    </thead>
  </table>
css html5 bootstrap-4 table responsive

  • Dalmo edits the question and places the code there in the way it is rendered in the browser. This {{ form1.first_name }} does not help much, puts a populated HTML so that to simulate your problem. And if you are using some CSS besides the CSS of Bootstrap tb includes there in the question, without it becomes complicated to help you

  • I didn’t really understand your question but this is how it is rendered in the browsed I use flask-python jinja2

3 answers

2

Missing the div around the table

<div class="table-responsive-sm">
</div>

0

I understand 2 clearly visible issues.

  1. On the profile screen: (where the Pilot information appears) the buttons need to be on another format, because their size is what’s expanding this screen. I recommend using the "Swap avatar" button on top of the photo with an absolute position, and the edit profile button can stay where it is anyway, so you reduce that exceeded horizontal space.

  2. On the Voos screen (where Aracaju Airport is listed) you can use a simpler structure, because this very large text again is taking a horizontal space. Even if you use a text wrap on it, this information will be very large.

Now with the tables I recommend using the tables of Semantic UI. They are totally vertical without scroll.

0

Voce can easily solve with these class

<table class="table table-responsive">
<!-- table content here -->
</table>

<table class="table table-sm-responsive"><!-- ... --></table>
<table class="table table-md-responsive"><!-- ... --></table>
<table class="table table-lg-responsive"><!-- ... --></table>
<table class="table table-xl-responsive"><!-- ... --></table>

if you have any questions about bootstrap

https://hackerthemes.com/bootstrap-cheatsheet/

Browser other questions tagged css html5 bootstrap-4 table responsive

You are not signed in. Login or sign up in order to post.