td Breiten, funktioniert nicht?

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?

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.

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;
}

 <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.

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.

Sie können das "Tabellenlayout: behoben;" zu deinem Tisch

table-layout: fixed;
width: 150px;

150px oder Ihre gewünschte Breite.

Referenz: https://css-tricks.com/fixing-tables-long-strings/

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

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

versuchen zu benutzen

word-wrap: break-word;

Ich hoffe das hilft

Versuche dies:

word-break: break-all;

ich benutze

<td nowrap="nowrap">

Um Wrap zu verhindern Referenz: https://www.w3schools.com/tags/att_td_nowrap.asp

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

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.

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;
}

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