Bootstrap Tabelle Kraft alle Header-Tabelle auf einzelne Zeile

Meine Tabellenüberschriften wie folgt aussehen anzuzeigen:Bootstrap Tabelle Kraft alle Header-Tabelle auf einzelne Zeile

Ich mag nicht, wie einige der Überschriften auf mehreren Linien wiedergegeben werden. Ich möchte, dass alle auf einer Linie stehen, aber ich bin mir nicht sicher, wie ich das machen soll.

Auch ich mag es nicht, dass der Notes-Header wird so viel Tischbreite einnimmt. Wie kann ich die benötigte Breite reduzieren?

Ich bin mit table-responsiveas the w3schools example shows here.

Update: Hinweis, dass die längeren Kopf Spalten mehr Spalt Rasterabstand nur geben: (ex: col-sm-4 als col-sm-1 oder col-sm-2 zu sagen, im Gegensatz) ist keine gute Lösung, da auf diese Weise zu viele Gitterflecke nehmen würde. Danach hätte ich nicht genug Rasterpunkte für den Rest meiner Spalten übrig.

Grundsätzlich möchte ich immer die Spaltenüberschriften auf einer einzigen Zeile sein. Wenn die Spaltenüberschrift nicht in einer einzigen Zeile passen, geht dann in ansprechenden Modus, um sicherzustellen, dass die Spaltenüberschriften auf einzelne Linien sein.

ist hier ein Code-Schnipsel. Stellen Sie sicher, "Ganze Seite" klicken:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <h2>Table</h2> 
 
    <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p> 
 
    <div class="table-responsive"> 
 
     <table class="table"> 
 
     <thead> 
 
      <tr> 
 
      <th>#</th> 
 
      <th>Firstname</th> 
 
      <th>Lastname really really long last name</th> 
 
      <th>Age</th> 
 
      <th>City</th> 
 
      <th>Country</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>1</td> 
 
      <td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis 
 
       parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at 
 
       eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum 
 
       nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis 
 
       dis parturient montes, nascetur ridiculus mus.</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis 
 
       parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at 
 
       eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum 
 
       nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis 
 
       dis parturient montes, nascetur ridiculus mus.</td> 
 
      <td>USA</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

Quelle

2016-04-01 Neil

Der Code, den Sie eingefügt haben das Bild nicht übereinstimmen helfen könnte. Es gibt keine Notizfelder im Code. – aphextwix

Sie col-[viewport]-[size] verwenden können. Denken Sie daran, die Spaltengrößen bis 12. Siehe Änderungen unter insgesamt sollte:

ich zufällig die Spaltengröße festgelegt haben, können Sie nach Ihren Wünschen ändern können: Wie unten sollte die Gesamt nie größer sein als 12 1+3+4+1+2+1 = 12

<tr> 
    <th class="col-xs-1">#</th> 
    <th class="col-xs-3">Firstname</th> 
    <th class="col-xs-4">Lastname really really long last name</th> 
    <th class="col-xs-1">Age</th> 
    <th class="col-xs-2">City</th> 
    <th class="col-xs-1">Country</th> 
</tr>

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <h2>Table</h2> 
 
    <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p> 
 
    <div class="table-responsive"> 
 
     <table class="table"> 
 
     <thead> 
 
      <tr> 
 
      <th class="col-xs-1">#</th> 
 
      <th class="col-xs-3">Firstname</th> 
 
      <th class="col-xs-4">Lastname really really long last name</th> 
 
      <th class="col-xs-1">Age</th> 
 
      <th class="col-xs-2">City</th> 
 
      <th class="col-xs-1">Country</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>1</td> 
 
      <td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis 
 
       parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at 
 
       eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum 
 
       nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis 
 
       dis parturient montes, nascetur ridiculus mus.</td> 
 
      <td>Pitt</td> 
 
      <td>35</td> 
 
      <td>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis 
 
       parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at 
 
       eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum 
 
       nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis 
 
       dis parturient montes, nascetur ridiculus mus.</td> 
 
      <td>USA</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

EDIT:

Wenn Sie Inhalte sind groß und nicht nur gewohnt in einer einzigen Zeile, es passen; auch wenn du es reaktionsfähig machst. Responsive versucht, alle in eine Zeile zu passen, indem bei Bedarf doppelte Zeilen hinzugefügt werden.

Wege zu erreichen, was Sie brauchen:

Spaltengrößen anpassen und macht andere Spalten kleiner

Senken Sie die Schriftgröße in eine Zeile zu passen.

schreiben benutzerdefinierte Klasse die Breite

Zum Beispiel die Angabe, Standardbreite ist:

.col-xs-4{ 
width:33.33%; 
}

Wenn Sie benutzerdefinierte Breite wollen, Klassen erstellen wie unter [IMP: sollte Summe genau sein 100%]

.col-custom-1{ 
width:20% 
} 
.col-custom-2{ 
width:20% 
} 
.col-custom-3{ 
width:20% 
} 
.col-custom-4{ 
width:20% 
} 
.col-custom-5{ 
width:20% 
}

Sie können ad nur breite wie pro anforderung oder verwenden inline breite direkt, ich bevorzuge klassen.

Quelle

2016-04-01 16:52:45 TheUknown

Ich habe das Zurb-Plugin für Responsive-Tabellen hinzugefügt, das das Gleiche tut, aber ich denke, dass dieser Ansatz besser ist, wenn Sie nicht möchten, dass verschiedene Plugins/Frameworks in 819374013 integriert werden. –

Vielen Dank für Ihre Antwort. Es funktioniert fast. Das Problem ist, dass die Spalte: "Nachname wirklich sehr lange Nachname" immer noch zwei Zeilen einnimmt. Ich weiß, dass eine Antwort darin bestehen würde, der Spalte mehr Spaltenrasterräume zu geben, aber das würde zu viele Spaltenrasterräume für den Rest meiner Spalten beanspruchen. Ich dachte, dass dies der springende Punkt der 'table-responsive' Klasse ist: dass es in den Responsive Modus geht und jede Spalte weiterhin nur eine Zeile aufnehmen würde. Irgendwelche Ideen? – Neil

Die '.table-responsive' Klasse fügt nur einen horizontalen Bildlauf auf kleinen Geräten hinzu (unter 768px). Wenn Sie auf etwas größer als 768px weit sehen, gibt es keinen Unterschied. [Lesen Sie hier mehr] (http://www.w3schools.com/bootstrap/bootstrap_ref_css_tables.asp) – TheUknown

Django Vorlagen könnte lösen helfen the multiple lines issue

Sie Ihre HTML statt Vielzahl trennen kann

Mein Beispiel lassen Sie uns sagen, wir haben zwei Dateien, die mit Kopf mehrere Zeilen gefüllt sind.

Dies ist der base.html

{% load staticfiles %} 
<!-- DOCTYPE html --> 
<html> 
<head> 
<title>{% block head_title %}Learn You English{% endblock head_title %}</title> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

<!-- base css --> 
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}" /> 
<style> 
{% block style %}{% endblock style %} 
</style> 

</head> 
<body> 

<div id="fb-root"></div> 
<script>(function(d, s, id) { 
var js, fjs = d.getElementsByTagName(s)[0]; 
if (d.getElementById(id)) return; 
js = d.createElement(s); js.id = id; 
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"; 
fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 

{% include "messages_display.html" %} 
<div class'container'> 
{% block content %} 
<!-- end of block html --> 
{% endblock content %} 
</div> 

<!-- <img src='{% static "img/beach.jpg" %}' /> 
--> 


<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
</body> 
</html>

Dies ist, wie Sie der mehreren Leitungen

loswerden konnte

{% extends "base.html" %} 
    {% block content %} 
{% endblock content %}

. Post_list.html ist das Beispiel

<!--obj == query set--> 
{% extends "base.html" %} 
{% block content %} 

<div class='col-sm-6 col-sm-offset-3'> 
    <h1>{{ title }}</h1> 
    <!-- Search get method--> 
<form method='GET' action ''> 
<input type='text' name='q' placeholder='Search posts' value='{{ request.GET.q }}'/> 
<input type='submit' vlaue='Search' /> 
</form> 
{% for obj in object_list %} 
<div class="row"> 
    <div class="col-sm-12"> 
    <div class="thumbnail"> 
     {% if obj.image %} 
     <img src='{{ obj.image.url }}' class='img-responsive' /> 
     {% endif %} 
     <div class="caption"> 
     {% if obj.draft %}<h3>Staff only: Draft</h3>{% endif %} {% if obj.publish > today %}<h3>Staff ONLY: Future Post</h3>{% endif %} 
     <h3><a href='{{ obj.get_absolute_url }}'>{{ obj.title }}</a> <small>{{ obj.publish}} </small></h3> 
     {% if obj.user.get_full_name %}<p>Author: {{ obj.user.get_full_name }}<p>{% endif %} 
     <p>{{ obj.content|linebreaks|truncatechars:120 }}</p> 
     <p><a href="{{ obj.get_absolute_url }}" class="btn btn-primary" role="button">View</a></p> 
     </div> 
    </div> 
    </div> 
<hr/> 
</div> 
{% endfor %} 

<!-- Pagination modified q for 
&q={{ request.GET.q }}" is keeping the search chararcter while switching 
the page in pagination 
--> 
<div class="pagination"> 
    <span class="step-links"> 
     {% if object_list.has_previous %} 
      <a href="?{{ page_request_var }}={{ object_list.previous_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">previous</a> 
     {% endif %} 

     <span class="current"> 
      Page {{ object_list.number }} of {{ object_list.paginator.num_pages }}. 
     </span> 

     {% if object_list.has_next %} 
      <a href="?{{ page_request_var }}={{ object_list.next_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">next</a> 
     {% endif %} 
    </span> 
</div> 


</div> 
<!-- end of block html --> 
{% endblock content %}

Ich bin nicht sicher über die Breite, aber vielleicht in den folgenden suchen

<div class='col-sm-6 col-sm-offset-3'>

Quelle

2016-04-01 17:06:53 abdulazizalmass

Bootstrap Tabelle Kraft alle Header-Tabelle auf einzelne Zeile

Antwort

Verwandte Themen