webentwicklung-frage-antwort-db.com.de

Anpassen der Breite der Tabellenzelle

Nehmen wir 4 Tabellenspalten - ID, Text, Date, Action. In meinem Fall haben Tabelle immer konstante Breite - in Beispiel 960px.

Wie kann ich solche Tabellen erstellen als:

*-*------------------------------------*----------*----*
|1| Some text...                       |May 2011  |Edit|
*-*------------------------------------*----------*----*
|2| Another text...                    |April 2011|Edit|
*-*------------------------------------*----------*----*

Wie wir sehen, passen ID, Date und Action ihre Breite an den Inhalt an, Text ist so lang wie möglich ... 

Ist das möglich, ohne eine bestimmte Spaltenbreite einzustellen? Wenn ID = 123 oder Date = November 2011, sollten die Spalten automatisch breiter sein ...

htmlcsscss-tables
9
Mr Sooul

Mit einer 100%-Breite für die Breite td und einer festen Breite für die Tabelle zusammen mit white-space:nowrap können Sie Folgendes tun:

Demo

HTML

<table>
    <tr>
        <td>1</td>
        <td width="100%">Some text... </td>
        <td>May 2011</td>
        <td>Edit</td>
    </tr>
    <tr>
        <td>2</td>
        <td width="100%">Another text... </td>
        <td>April 2011</td>
        <td>Edit</td>
    </tr>
</table>


CSS

table
{
    ...
    width:960px;
}

td
{
    ...
    white-space:nowrap;
}
17
Joseph Marikle

im Grunde ist es einfach so: http://jsfiddle.net/49W5A/ - Sie müssen die Zellbreite auf etwas klein einstellen (wie 1px), um sie so klein wie möglich zu halten.

aber wie Sie sehen werden, gibt es ein Problem mit den Datumsfeldern beim Zeilenumbruch. Um dies zu verhindern, fügen Sie einfach white-space: nowrap; für Ihr Textfeld hinzu: http://jsfiddle.net/ZXu7U/

arbeitsbeispiel:

<style type="text/css">
.table{
    width:500px;
    border: 1px solid #ccc;
}
.table td{
    border: 1px solid #ccc;
}
.id, .date, .action{
    width:1px;
}
.date{
    white-space: nowrap;
}
</style>
<table class="table">
    <tr>
        <td class="id">1</td>
        <td class="text">Some Text...</td>
        <td class="date">May 2011</td>
        <td class="action">Edit</td>
    </tr>
    <tr>
        <td class="id">2</td>
        <td class="text">Another Text...</td>
        <td class="date">April 2011</td>
        <td class="action">Edit</td>
    </tr>
</table>
4
oezi

Mein bester Rat an Sie ist, die Breiten der Tabelle nicht zu berühren. Die Tabelle wird automatisch so angeordnet, dass alle Zellen am besten funktionieren.

Wenn Sie jedoch Push-Through durchführen möchten, würde ich width: 1px; für die Zellen verwenden, die angepasst werden müssen (eine Spalte genügt). Verwenden Sie auch white-space: nowrap für alle Zellen. Dadurch wird sichergestellt, dass die Linien nicht brechen.

4
Madara Uchiha

Versuche dies:

.id, .date, .action sind die Tabellenzellen (td).

CSS: 

.id, .date, .action {
   width: 1em;
}

Es hat für mich funktioniert.

Mit width: 1em wird der Text nicht geschnitten, sondern die Breite auf ein Minimum reduziert.

2
robcaa

Die beste Methode, die ich für das Einstellen von Spaltenbreiten von Tabellen gefunden habe, ist die Verwendung von a tischkopf (die leer sein kann) 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;
}

Ergebnis anzeigen

Alternativ können Sie colgroup wie vorgeschlagen verwenden hier .

0
eicksl