Mit CSS Tabellenzellen einer bestimmten Breite ohne Zeilenumbruch erstellen

Question

In einem Projekt beteiligt war, in denen ich brauchte Tabellen mit Spalten einer bestimmten Breite zu machen mit nur einer HTML-Zeile pro Tabellenzeile (keine Verpackung). Ich brauche jede Tabellenzelle eine Polsterung von 1 Pixel an dem Ober- und Unterseite und 2 Pixel an den linken und rechten zu haben. Der beste Weg, ich damit aufwarten kann funktioniert Cross-Browser ist in einem td in der Tabelle ein div setzt auf diese Weise:

<style>
  table.grid { border: none; border-collapse: collapse; }
  table.grid tbody tr td { padding: 1px 2px; }
  table.grid tbody tr td div { overflow: hidden; white-space: nowrap; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><div>One</div></td>
      <td class="two"><div>Two</div></td>
    </tr>
    <tr>
      <td class="one"><div>Another One</div></td>
      <td class="two"><div>Another Two</div></td>
    </tr>
  </tbody>
</table>

Ich würde gerne in der Lage sein, um die Notwendigkeit zu beseitigen, die extra div hinzuzufügen. Ich habe viele Stunden damit verbringen, dieses Problem zu googeln, aber nicht eine Alternative finden.

Gibt es eine Möglichkeit zu tun, was ich ohne die Notwendigkeit, brauchen die zusätzliche div hinzufügen? Wenn ja, was ist das?

Gibt es eine Möglichkeit, das gewünschte Ergebnis zu bekommen, ohne Tabellen überhaupt mit?

Answer 1

Leider Tabellenelemente nicht respektieren Überlauf, so dass Sie, dass für ein Kind Element angewandt werden müssen.

edit: ich zu früh gesprochen habe, wie ich diesen Effekt in FF max-width mit erstellen kann, und ich habe entdeckt, dieses Ding die für IE funktionieren könnte. Sie lernen jeden Tag etwas.

edit2: ja, es funktioniert für IE7 zumindest aber es gibt einen ernsthaften Nachteil, dass Sie keine Leerzeichen im Text haben können, müssen sie konvertiert werden  . Ich glaube, Sie wahrscheinlich mit der <div> Lösung aus Gründen der Sauberkeit und Kompatibilität bleiben sollen.

Answer 2

Eigentlich Sie können .

Normalerweise dauert die Tabelle den Platz er braucht. Wenn Sie der table eine Breite von 100% geben, dauert es 100% der mit und Aktien , die zwischen den Zellen in Bezug auf ihren Inhalt .

Es gibt keinen freien Raum in einer Tabelle. Irgendwann muss es eine Zelle sein, die den verbleibenden Platz in Anspruch nimmt , wenn die Größe der anderen eingestellt worden

Um eine Breite einer Zelle gesetzt, würden Sie brauchen, geben ihm eine width und eine max-width auf die gleiche Größe . Für eine Tabelle mit N Spalten, können Sie das tun, um N-1 Spalten, und die letzte Spalte wird der verbleibende Platz nehmen.

Wenn Sie das tun, um N-2 Spalten, die zwei Spalten, die mit haben nicht festgelegt werden um den verbleibenden Platz teilen.

das alles zu haben, können Sie hinzufügen white-space:no-wrap und / oder text-overflow:ellipsis wenn Sie möchten.

Hier ist ein Bildbeispiel (meine RSS-Reader): https: //i.stack. imgur.com/bPpKP.png

Und ein anschauliches Beispiel: https://codepen.io/lehollandaisvolant/pen/ REVNLy? Editoren = 1100

Sie können sehen, dass es tatsächlich erstaunlich kraftvoll ist. Im codepen können Sie sehen:

• einige Zellen sind feste Breite
• einige fit Zellen auf den Text enthält
• einige Zellen passen die der Behälter

Und Sie können das Verhalten der einzelnen Zelle (solange es eine Zelle ist, die in den Behälter paßt) entscheiden

Answer 3

Sie sollten nicht zu Nest brauchen ein div in jeder Tabellenzelle. Folgendes sollte erreicht das gleiche beeinflussen.

<style>
  table.grid { border-collapse: collapse; }
  table.grid tbody tr td { overflow: hidden; white-space: nowrap; padding: 1px 2px; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><span>One</span></td>
      <td class="two"><span>Two</span></td>
    </tr>
    <tr>
      <td class="one"><span>Another One</span></td>
      <td class="two"><span>Another Two</span></td>
    </tr>
  </tbody>
</table>

Answer 4

Sie können auch einfach Tabelle ersetzen durch div.

Dann müssen Sie die Spaltenbreite in CSS definieren (was schwierig sein kann zu bekommen in allen Browsern zu arbeiten).

Beispiel: Ihr Code würde dann wie folgt aussehen:

<div class="mainBoxOfTable">
    <div class="Line">
      <div class="ColumnOne">One</div>
      <div class="ColumnTwo">Two</div>
    </div>
    <div class="Line">
      <div class="ColumnOne">another One</div>
      <div class="ColumnTwo">another Two</div>
    </div>
 </div>