Festlegen der Spaltenbreite der Tabellenspalte unabhängig von der Textmenge in den Zellen?

In meiner Tabelle habe ich die Breite der ersten Zelle in einer Spalte festgelegt 100px.
Wenn der Text in einer der Zellen in dieser Spalte jedoch zu lang ist, wird die Breite der Spalte größer als 100px. Wie kann ich diese Erweiterung deaktivieren?

Ich habe ein bisschen damit gespielt, weil ich Probleme hatte, es herauszufinden.

Sie müssen die Zellenbreite (entweder einzustellen thoder tdarbeitete, habe ich beide) und stellen Sie die table-layoutauf fixed. Aus irgendeinem Grund scheint die Zellenbreite nur dann fest zu bleiben, wenn auch die Tabellenbreite festgelegt ist (ich denke, das ist albern, aber was auch immer).

Es ist auch nützlich, die overflowEigenschaft so festzulegen hidden, dass kein zusätzlicher Text aus der Tabelle austritt.

Sie sollten sicherstellen, dass alle Rahmen und Größen auch für CSS belassen werden.

Ok, also hier ist was ich habe:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Hier ist es in JSFiddle

Dieser Typ hatte ein ähnliches Problem: Tabellenzellenbreiten - Breite korrigieren, lange Wörter umbrechen / abschneiden

Siehe: http://www.html5-tutorials.org/tables/changing-column-width/

Verwenden Sie nach dem Tabellen-Tag das col-Element. Sie benötigen kein schließendes Tag.

Wenn Sie beispielsweise drei Spalten hatten:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

Fügen Sie einfach ein <div>Tag hinzu <td>oder <th>definieren Sie die Breite darin <div>. Das wird dir helfen. Sonst funktioniert nichts.

z.B.

<td><div style="width: 50px" >...............</div></td>

Wenn Sie eine oder mehrere Spalten mit fester Breite benötigen, während die Größe anderer Spalten geändert werden soll, versuchen Sie, beide min-widthund max-widthdenselben Wert festzulegen .

Sie müssen dies in das entsprechende CSS schreiben

table-layout:fixed;

Was ich tue ist:

1. Stellen Sie die td-Breite ein:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. Stellen Sie die td-Breite mit CSS ein:

   <td style="width:200px; height:50px;">

3. Stellen Sie die Breite mit CSS erneut auf max und min ein:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

Es klingt ein bisschen repetitiv, aber es gibt mir das gewünschte Ergebnis. Um dies mit Leichtigkeit zu erreichen, müssen Sie möglicherweise die CSS-Werte in eine Klasse in Ihrem Stylesheet einfügen:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

dann:

<td class="td_size">

Platzieren Sie das Klassenattribut nach <td>Belieben.

Ich habe das benutzt

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

Wenn Sie kein festes Layout wünschen, geben Sie eine Klasse für die Spalte an, deren Größe entsprechend ist.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

Es hilft auch, die letzte "Füllzelle" mit der Breite: auto einzufügen . Dies nimmt den verbleibenden Platz ein und lässt alle anderen Abmessungen wie angegeben.

Lassen Sie die akzeptierte Antwort auf kleine Bildschirme reagieren, wenn diese kleiner als die feste Breite sind.

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

Einstellen:

style="min-width:100px;" 

Hat für mich gearbeitet.

KAsun hat die richtige Idee. Hier ist der richtige Code ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

Gemäß meiner Antwort hier ist es auch möglich, einen Tabellenkopf (der leer sein kann) zu verwenden und relative Breiten für jede Tabellenkopfzelle anzuwenden. Die Breiten aller Zellen im Tabellenkörper entsprechen der Breite ihres Spaltenkopfs. Beispiel:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

Zeige Ergebnis

Verwenden Sie alternativ colgroupwie in Hyathins Antwort vorgeschlagen.

Ich verwende ein :: after-Element in der Zelle, in dem ich unabhängig vom vorhandenen Text eine minimale Breite festlegen möchte:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

Ich muss weder die Breite des übergeordneten Tisches festlegen noch das Tabellenlayout verwenden.

Ich fand, dass KAsuns Antwort mit vw besser funktioniert als mit px wie folgt :

<td><div style="width: 10vw" >...............</div></td>

Dies war das einzige Styling, das ich brauchte, um die Spaltenbreite anzupassen

Sie müssen nicht festlegen "fixed"- Sie müssen lediglich overflow:hiddenfestlegen , da die Spaltenbreite festgelegt ist.