td Breiten, funktioniert nicht?

92

Also habe ich diesen Code hier:

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

mit dem CSS

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

Es funktioniert gut in meinem Browser und ich habe es in jedem Browser sowohl auf dem Mac als auch auf dem PC getestet, aber jemand beschwert sich, dass sich die Breite des tdmit width200 ständig ändert. Ich habe keine Ahnung, wovon er spricht. Weiß jemand, warum er oder sie sieht, dass sich die Breite auf dem ändert td?

user979331
quelle
Wie können wir also helfen, wenn wir noch weniger Ahnung haben, worum es bei der Beschwerde geht? Wir können nicht einmal die reale Seite testen und haben keine Informationen über die Person und ihre Browserumgebung.
Jukka K. Korpela

Antworten:

122

Es sollte sein:

<td width="200">

oder

<td style="width: 200px">

Beachten Sie, dass, wenn Ihre Zelle Inhalte enthält, die nicht in die 200px (wie somelongwordwithoutanyspaces) passen , die Zelle trotzdem gedehnt wird, es sei denn, Ihr CSS enthält table-layout: fixedfür die Tabelle.

BEARBEITEN

Wie Kristina Childs in ihrer Antwort vermerkt hat, sollten Sie sowohl das widthAttribut als auch die Verwendung von Inline-CSS (mit dem styleAttribut) vermeiden . Es ist eine gute Praxis, Stil und Struktur so weit wie möglich zu trennen.

bfavaretto
quelle
Danke bfavaretto ... versuche das jetzt
user979331
47
sollte die Tabelle sein<table style="table-layout:fixed;">
user979331
3
@ user1193385, Ja, das war's. Vermeiden Sie jedoch nach Möglichkeit die Verwendung von Inline-CSS.
Bfavaretto
4
Inline-CSS ist eine schlechte Idee, es sei denn, Sie brauchen es wirklich nur an einem Ort. Außerdem wurde die Breite seit einiger Zeit abgeschrieben. siehe Antwort unten
Kristina Childs
2
@kristinachilds Ich stimme zu. In meinem Beispiel habe ich Inline-CSS verwendet, damit ich mich nicht in zwei Codeblöcke für HTML und CSS aufteilen muss. Oben wurde ein Kommentar hinzugefügt, der das OP auffordert, Inline-CSS zu vermeiden. Was das width-Attribut betrifft, ist es technisch gesehen nicht veraltet (da die HTML5-Spezifikation immer noch ein funktionierender Entwurf ist), aber Sie haben Recht, es sollte vermieden werden. Ich werde meine Antwort mit einem Hinweis dazu bearbeiten.
Bfavaretto
30

Breite und / oder Höhe in Tabellen sind nicht mehr Standard. wie Ianzz sagt, sind sie veraltet. Der beste Weg, dies zu tun, besteht darin, ein Blockelement in Ihrer Tabellenzelle zu haben, das die Zelle auf die gewünschte Größe offen hält:

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

CSS

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}
Kristina Kinder
quelle
10
Leider liegt die E-Mail-Technologie viele Jahre hinter der aktuellen HTML-Spezifikation zurück, und in diesem Fall sind Tabellen und Inline-CSS leider unvermeidbar.
MikeTheLiar
2
Niemand sprach über HTML-E-Mails, dies war für das grundlegende Surfen im Desktop-Web. Aber ja, für E-Mails sind Tabellen und Inline-CSS die einzige Möglichkeit, sie zu erstellen. Danke, Microsoft ...
Kristina Childs
3
Ich rufe nur E-Mails auf, weil mich das hierher gebracht hat. Ich hatte das gleiche Problem mit E-Mail.
MikeTheLiar
20
 <table style="table-layout:fixed;">

Dadurch wird die gestaltete Breite erzwungen <td>. Wenn der Text ihn überfüllt, überlappt er den anderen <td>Text. Versuchen Sie also, Medienabfragen zu verwenden.

mateostabio
quelle
1
In meinem Anwendungsfall war dies genauso wichtig wie die Antwort von
bfavaretto
In meinem Fall (Firefox 70.0) wurden table-layout:fixedSpalten feste Breiten zugewiesen, sodass ich sie nicht widthmehr ändern kann (mit jquery).
Jose Manuel Abarca Rodríguez
7

Sie können keine Einheiten in width/ heightAttribute einer Tabelle angeben . Diese sind immer in Pixel angegeben, aber Sie sollten sie überhaupt nicht verwenden, da sie veraltet sind.

lanzz
quelle
7

Sie können innerhalb des <td>Tags CSS verwenden:display:inline-block

Mögen: <td style="display:inline-block">

Siddharth Shukla
quelle
2

versuchen zu benutzen

word-wrap: break-word;

Ich hoffe das hilft

Med7at
quelle
1

Versuche dies:

word-break: break-all;
Masoud HB
quelle
1

Verwenden

<table style="table-layout:fixed;">

Dadurch wird die Tabelle auf 100% Breite gesetzt. Verwenden Sie dann diesen Code

$('#dataTable').dataTable( {
        bAutoWidth: false, 
        aoColumns : [
          { sWidth: '45%' },
          { sWidth: '45%' },
          { sWidth: '10%' },
              ]
      });

(Tabellen-ID ist dataTable und hat 3 Spalten), um die Länge für jede Zelle anzugeben

Amrit Anand
quelle
0

Beachten Sie, dass sich das Anpassen der Breite einer Spalte im Kopf auf die gesamte Tabelle auswirkt

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>[email protected]</td>
    </tr>
</table>

In meinem Fall hat die Breite auf dem Kopf> tr die Breite auf Tabelle> tr> td direkt überschrieben.

Nick Woodhams
quelle
0

Ich habe es mit vielen Lösungen versucht, aber es hat bei mir nicht funktioniert, also habe ich versucht, mit der Tabelle zu flexieren, und es hat bei mir mit allen Tabellenfunktionen wie Randkollaps usw. gut funktioniert. Nur die Änderung ist die Anzeigeeigenschaft

Dies war meine HTML-Anforderung

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="3">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="3">2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td colspan="2">3</td>
    </tr>
  </tbody>
</table>

Mein CSS

table{
    display: flex;
  flex-direction: column;
}
table tr{
    display: flex;
  width: 100%;
}
table > thead > tr > th:first-child{
    width: 20%;
}
table > thead > tr > th:last-child{
    width: 80%;
}
table > tbody tr > td:first-child{
    width: 10%;
}
table > tbody tr > td{
    width: 30%;
}
table > tbody tr > td[colspan="2"]{
    width: 60%;
}
table > tbody tr > td[colspan="3"]{
    width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
    border-right: 0;
}
Mohammed Yousuff
quelle
0

Dieses Problem lässt sich mit min-widthund max-widthinnerhalb einer CSS-Regel recht einfach lösen .

HTML

<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>

CSS

.name {
  max-width: 80px;
  min-width: 80px;
}

Dadurch wird die erste Spalte mit einer Breite von 80 Pixel erzwungen. Normalerweise verwende ich nur max-width ohne min-width, um in Text zu regieren, der gelegentlich zu lang ist, um eine Tabelle mit einer super breiten Spalte zu erstellen, die größtenteils leer ist. Bei der Frage des OP ging es jedoch darum, eine feste Breite festzulegen, daher beide Regeln zusammen. In vielen Browsernwidth:80px; CSS für Tabellenspalten ignoriert. Das Festlegen der Breite im HTML-Code funktioniert zwar, ist jedoch nicht die Art und Weise, wie Sie Dinge tun sollten.

Ich würde empfehlen, Regeln für die minimale und maximale Breite zu verwenden und sie nicht gleich festzulegen, sondern einen Bereich festzulegen. Auf diese Weise kann die Tabelle das tun, aber Sie können ihr einige Hinweise geben, was mit zu langen Inhalten zu tun ist.

Wenn ich verhindern möchte, dass der Text umbrochen wird und die Höhe einer Zeile erhöht wird - und es dennoch einem Benutzer ermöglichen soll, den vollständigen Text zu sehen, verwende ich white-space: nowrap; anzuzeigen die Hauptregel und wende dann eine Hover-Regel an, mit der die Regeln für Breite und Nowrap entfernt werden damit der Benutzer den gesamten Inhalt sehen kann, wenn er mit der Maus darüber fährt. Etwas wie das:

CSS

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

Es kommt nur darauf an, was Sie erreichen wollen. Ich hoffe das hilft jemandem. PS Abgesehen davon gibt es für iOS eine Korrektur für das Hover, das nicht funktioniert - siehe CSS-Hover funktioniert nicht unter iOS Safari und Chrome

SOKitsune
quelle