HTML Tabellenbreite nicht funktioniert

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <table border="1" width="100%">

        <tr>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        </tr>


    </table>




</body>
</html>

Ich versuche, die Breite der Tabelle auf 100% für die Tabelle oben, aber es hat keine Auswirkungen, es geht über die Fenster Breite. wie ändere ich die Breite der Tabelle, so dass es ist die gleiche Größe wie Fenster.

Sie können nicht allen passt, dass es 100% sowieso. Also, was hast du erwartet? Wenn Sie erklären, welchen Effekt Sie hoffen, vielleicht können wir helfen, das zu erreichen.

InformationsquelleAutor user2959594 | 2013-11-06

Das problem ist, den Inhalt in Ihre Tabelle mehr Speicherplatz benötigt, als 100% der Fenster-Größe bietet.

Was Sie tun können, ist die Verwendung der overflow-Eigenschaft von CSS. Versuchen Sie das folgende Beispiel und entschied sich, ob dies eine option für Sie:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
    .table {
        color: green;
        display: block;
        max-width: 100%;
        overflow: scroll; <!-- Available options: visible, hidden, scroll, auto -->
    }
</style>
</head>
<body>

<table border="1" class="table">

    <tr>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>


</table>
</body>
</html>

Es gibt 4 verfügbaren Optionen für die overflow-Eigenschaft: visible, hidden, scroll und auto. Das obige Beispiel zeigt die scroll-option, die fügt eine schriftrolle-bar auf die Tabelle selbst.

InformationsquelleAutor DonnyDee

13

Gibt es nichts, was Sie tun können, wenn Sie den Inhalt der Tabelle zu breit ist (wie in deinem Beispiel), abgesehen vom alter, den Inhalt, machen es möglich, den browser zu zeigen, dass es in einem schmaleren format. Einstellung width:100%; wird keinen Effekt haben, wenn der Inhalt zu breit ist. Der browser wird nur resort zur Anzeige einer horizontalen Bildlaufleiste.

Können Sie machen Sie Ihre Inhalte noch mehr enge durch:
- Verringerung der Anzahl der Spalten
- mit CSS white-space: nowrap auf einem der content, also der browser hat die option der Verpackung, dass der Inhalt zu halten, der Breite nach unten.
- Verringerung der Ränder, Rahmen, Füllung, dass Sie
- Reduzieren Sie die Schriftgröße
- Verwenden word-wrap:break-word oder word-break: break-all;
- Überlauf der Inhalte, die nicht passen in Breite des Bildschirms mit overflow: scroll; (Ihre Optionen sind sichtbar, hidden, scroll und auto)
Browser vermeiden Sie die Bildlaufleiste, wenn Sie es kann, aber es wird nicht, wenn die Inhalte nicht passen in der Breite der Seite.

Es gibt andere Dinge, die Sie tun konnte. Ändern Sie die Schriftgröße, die word-wrap:break-word etc. es ist sogar möglich, dass die Tabelle zu 100% aber die Inhalte überlauf aus. Ich weiß nur nicht, welche dieser Effekte, die OP war in der Hoffnung zu erreichen.
Ich werde auch werfen in CSS word-break: break-all;
Würde es helfen, wenn Sie gab ein Aktuelles Beispiel und nicht nur verwenden Sie Stichpunkte.

InformationsquelleAutor tomsullivan1989

Sie können ein element in die Zellen - das ist, was ich getan habe.

<table>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
</table>

InformationsquelleAutor Stevoh

-4

legen Sie eine Klasse in Ihre Tabelle wie
```
 <table border="1" class="size" >
```
Ihre css setzen Sie
```
  .size{

             width : 100%;

             }
```
und Sie sollten den link der css-zwischen
wie diese :
```
<link href="css/YOUR_CSS.css" rel="stylesheet" type="text/css" media="all" />
```
Testen Sie diese Dinge, bevor du postest. Wenn Sie getestet hatte, dann hätten Sie gesehen, diese Lösung hat genau das gleiche problem wie der OP. Selbst wenn Sie korrigiert die Fehler in deinem Beispiel.
Sorry frank, Aber mit Blick auf Ihre Lösung gab mir Kopfschmerzen. danke.
wenn Sie beginnen, in programation, werden Sie sehen, dass html und css in "paar" im Allgemeinen , es bedeutet, dass css-Klasse entwerfen Sie html-code Dank css-code. So erstellen Sie eine neue Datei mit .css und rufen Sie diese Seite mit <link> ich pet
Sie streicheln kann, was Sie wollen, aber die Antworten hier sollen Lösungen für Probleme, die nicht mehr Probleme. Nach der Bearbeitung, da ist noch ein Fehler. Und wie ich schon sagte, es wird nicht funktionieren, auch ohne Fehler!
Was ist "programation"?

InformationsquelleAutor Thomas Trabelsi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.