Stellen Sie die Tabelle Spaltenbreite konstant, unabhängig von der Menge an Text in ihren Zellen?

Question

In meinem Tisch habe ich die Breite der ersten Zelle in einer Spalte sein 100px.
Wenn jedoch der Text in einen der Zelle in dieser Spalte zu lang ist, wird die Breite des Spalts mehr als 100px. Wie könnte ich diese Erweiterung deaktivieren?

Answer 1

Ich spielte ein wenig mit ihm, weil ich Mühe hatte, es herauszufinden.

Sie müssen die Zellenbreite einzustellen (entweder th oder td arbeitete, habe ich beides) und die table-layout auf fixed gesetzt. Aus irgendeinem Grund scheint die Zellenbreite nur fixiert zu bleiben, wenn die Tischbreite eingestellt ist, auch (ich glaube, das ist albern, aber whatev).

Auch ist es sinnvoll, die overflow Eigenschaft auf hidden einzustellen keinen zusätzlichen Text zu verhindern, kommt aus der Tabelle.

Sie sollten sicherstellen, alle Einfassen und Dimensionierung für CSS zu verlassen, auch.

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 Mann hatte ein ähnliches Problem: Tabelle Zellenbreiten - Befestigungs Breite, Verpackungs- / Kürzen lange Worte

Answer 2

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

Nach dem table-Tag, verwenden Sie das col-Element. Sie nicht über einen End-Tag benötigen.

Zum Beispiel, wenn Sie hatte drei Spalten:

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

Answer 3

Just Add <div> Tag innerhalb <td> oder <th> definieren Breite innen <div>. Das wird dir helfen. Nichts anderes funktioniert.

zB.

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

Answer 4

Wenn Sie ein oder mehr mit fester Breite Spalten während andere Größe der Spalten ändern sollen, versuchen beide min-width und max-width auf den gleichen Wert zu setzen.

Answer 5

Sie müssen diese innerhalb der entsprechenden CSS schreiben

table-layout:fixed;

Answer 6

Was ich tue, ist:

1. Stellen Sie die td width:

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

2. Stellen Sie die td width mit CSS:

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

3. Stellen Sie die Breite wieder als max und min mit CSS:

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

Es klingt etwas eintönig wenig, aber es gibt mir das gewünschte Ergebnis. Um dies zu erreichen mit viel Leichtigkeit, müssen Sie möglicherweise die CSS-Werte in einer Klasse in Ihrem Stylesheet setzen:

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

Legen Sie die Klasse Attribut auf jede <td> Sie wollen.

Answer 7

Ich habe dieses

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

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

Answer 8

Es hilft auch, in der letzten "Füllstoff Zelle" zu setzen, mit width: auto . Dies belegt die verbleibende Raum, und alle anderen Dimensionen lassen, wie angegeben.

Answer 9

Wenn Sie nicht über ein festes Layout mögen, geben Sie eine Klasse für die Spaltengröße angemessen zu sein.

CSS:

.special_column { width: 120px; }

HTML:

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

Answer 10

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>

Answer 11

Machen Sie die akzeptierte Antwort reagieren für kleine Bildschirme, wenn kleiner als die feste Breite.

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/

Answer 12

Wie pro meine Antwort href="https://stackoverflow.com/questions/7613541/css-adjusting-table-cell-width/53120641#53120641">, ist es auch möglich, verwenden, um einen Tabelle Kopf (die leer sein können) und gilt relative Breite für jeden Tabellenkopf Zelle. Die Breiten aller Zellen in der Tabelle Körper werden auf die Breite ihres Säulenkopfes entsprechen. 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;
}

Ergebnis anzeigen

Alternativ Verwendung colgroup wie in Hyathin Antwort vorgeschlagen.

Answer 13

Wenn Sie diesen Wert:

style="min-width:100px;" 

Für mich arbeiten.

Answer 14

fand ich kasun Antwort funktioniert besser mit vw statt Pixel in etwa so:

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

Dies war das einzige Styling ich brauchte die Spaltenbreite

einstellen

Answer 15

Sie auf Set "fixed" nicht brauchen -. Alles, was Sie brauchen, ist seit der Spalte Einstellung overflow:hidden Breite eingestellt ist