it-swarm.com.de

Festlegen der Breite der Tabellenspalte unabhängig von der Textmenge in den Zellen

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

470
Misha Moroshko

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

Sie müssen die Zellbreite einstellen (entweder th oder td funktionierte, ich habe beides eingestellt) UND den table-layout auf fixed setzen. Aus irgendeinem Grund scheint die Zellenbreite nur fest zu bleiben, wenn auch die Tabellenbreite eingestellt ist (ich denke, das ist dumm, aber was auch immer). Es ist auch nützlich, die Überlaufeigenschaft auf ausgeblendet zu setzen.

Sie sollten darauf achten, dass auch für CSS alle Begrenzungen und Größenänderungen vorgenommen werden.

Ok, hier ist was ich habe. 

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;
    width: 200px;
}

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

Hier ist es in JSFiddle

Dieser Typ hatte ein ähnliches Problem: Breite der Tabellenzellen - Breite fixieren, lange Wörter umschließen/abschneiden

547
ptpaterson

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

Verwenden Sie nach dem Table-Tag das Element col. Sie brauchen kein schließendes Tag.

Wenn Sie beispielsweise drei Spalten hätten:

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

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

z.B. 

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

Wenn Sie eine oder mehrere Spalten mit fester Breite benötigen, während die Größe der anderen Spalten geändert werden soll, setzen Sie min-width und max-width auf denselben Wert.

61
scrrr

Sie müssen dies in das entsprechende CSS schreiben

table-layout:fixed;
28
vinoth kumar

Was ich mache ist:

  1. Td Breite einstellen: 

    <td width="200" height="50"><!--blaBlaBla Contents here--></td>
    
  2. Legen Sie die TD-Breite mit CSS fest: 

    <td style="width:200px; height:50px;">
    
  3. Stellen Sie die Breite erneut als max und min mit CSS ein: 

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

Es hört sich ein wenig repetitiv an, 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 in einem beliebigen <td>, den Sie möchten.

21
ErickBest

Es hilft auch, die letzte "Füllzelle" mit width: auto einzufügen. Dies belegt den verbleibenden Speicherplatz und lässt alle anderen Abmessungen wie angegeben. 

2
Mitja Gustin

Ich habe das benutzt

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

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

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

CSS: 

.special_column { width: 120px; }

HTML: 

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

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>
1
Aaron Averill

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

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 Geige

https://jsfiddle.net/w9s3ebzt/

1

Entsprechend meiner Antwort hier ist es auch möglich, ein tischkopf (kann leer sein) und wendet relative Breiten für jede Kopfzelle an. Die Breiten aller Zellen im Tabellenkörper entsprechen der Breite ihres Spaltenkopfes. 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

Alternativ können Sie colgroup verwenden, wie in der Antwort von Hyathin vorgeschlagen.

0
eicksl

Dies einstellen:

style="min-width:100px;" 

Hat für mich gearbeitet.

0
Priyanka Arora