Tabelle mit horiz. Scrollbalken

[augustq]

Hi,

ich habe eine Frage: ich hätte gerne eine Tabelle mit (möglicherweise) horizontalem Scrollbar in einzelnen td-Elementen.

Wie mache ich dies?

Begründung: für die Darstellung von Code habe ich dieses Element:

pre.grey{
    background-color:#eee;
    font-family:monospace; 
    border:1px solid #aaa;
    margin:0.3em 1em;
    padding:0 0.4em; 
    overflow:auto; 
    font-style:normal; 
    max-height:15em; 
    } 

meinen Code kann ich jetzt darstellen in der Form:

<pre class="grey"><span class="notranslate">sub_select()                      <i>we are at level 3</i>
    evaluate_join_record()
        end_sj_materialize()
</span></pre>

Bei Bedarf, d.h. bei Überschreitung der Breite wird ein Scrollbar hinzugefügt.

Jetzt will ich aber 2 Code-Stücke nebeneinander stellen, als Vergleich. Also nehme ich ein table-Element - und schon klappt dies nicht mehr. So sieht das aus:

<table>
<thead>
  <tr>
    <th>MySQL</th>
    <th>MariaDB</th>
  </tr>
</thead>
<tbody>
<tr>
<td style="vertical-align:top"><pre class="grey"><span class="notranslate">create_myisam_from_heap()
/**
  If a MEMORY table gets full, create a disk-based table and copy all rows
  to this.
  ....
*/
</span></pre></td>
<td style="vertical-align:top"><pre class="grey"><span class="notranslate">create_internal_tmp_table_from_heap()
/*
  If a HEAP table gets full, create a internal table in MyISAM or Maria
  and copy all rows to this
*/
</span></pre></td>
</table>

Die Breite eines Elements hängt vom Inhalt ab. Ich hätte aber gerne eine feste Breite puls (optional) einen Scrollbalken. Wie mache ich dies?

Schönen Gruß AugustQ

[Matthias Apsel]

Hallo augustq,

Die Breite eines Elements hängt vom Inhalt ab. Ich hätte aber gerne eine feste Breite puls (optional) einen Scrollbalken. Wie mache ich dies?

Gib den td-Elementen eine feste Breite und overflow-x auto;

Bis demnächst
Matthias

[augustq]

Hallo Matthias,

so habe ich es geändert:

<td  style="vertical-align:top; overflow-x:auto; width:10%;"><pre class="grey"><span class="notranslate"><i>in end_sj_materialize():</i>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx
</span></pre></td>

Ergebnis: da ändert sich nichts. Weiterhin legen die 'xxx' die Breite der Zelle fest.

Schönen Gruß AugustQ

[MrMurphy1]

Hallo

Wie mache ich dies?

Du hast keine Tabellendaten, also ist das table-Element falsch. Zumal das table-Element mit seinen zugehörigen Kindelementen teilweise andere Auswirkungen auf das Layout hat, um echte Tabellendaten möglichst sinnvoll anzuzeigen.

Gruss

MrMurphy

[augustq]

Hallo MrMurphy,

so funktioniert es:

<table>
<thead>
  <tr>
    <th>MySQL</th>
    <th>MariaDB</th>
  </tr>
</thead>
<tbody>
<tr>
<td style="vertical-align:top; overflow-x:scroll; max-width:450px;"><pre class="grey"><span class="notranslate">create_myisam_from_heap()
/**
  If a MEMORY table gets full, create a disk-based table and copy all rows
  to this.
  ....
*/
</span></pre></td>
<td style="vertical-align:top; overflow-x:scroll; max-width:450px;"><pre class="grey"><span class="notranslate">create_internal_tmp_table_from_heap()
/*
  If a HEAP table gets full, create a internal table in MyISAM or Maria
  and copy all rows to this
*/
</span></pre></td>
</table>

Vermutlich braucht man die Breite der Zelle und die Anweisung overflow.

Danke. AugustQ

PS: ich habe jetzt einen horizontalen und einen vertikalen Scrollbalken. Der vertikale Balekn kommt vom pre-Element.

[Vollzitat entfernt]

[MrMurphy1]

Hallo

ich sehe bei dem HTML

      <article>
         <section>
            <h2>MySQL</h2>
            <pre class="grey">
               <span class="notranslate">
create_myisam_from_heap()
/**
   If a MEMORY table gets full, create a disk-based table and copy all rows
   to this.
   ....
*/
               </span>
            </pre>
         </section>
         <section>
            <h2>MariaDB</h2>
            <pre class="grey">
               <span class="notranslate">
create_internal_tmp_table_from_heap()
/*
   If a HEAP table gets full, create a internal table in MyISAM or Maria
   and copy all rows to this.
   ....
*/
               </span>
            </pre>
         </section>
      </article>

folgendes CSS

      article {
         display: flex;
      }
      section {
         padding: 0.5rem;
      }
      pre.grey {
         background-color: #eee;
         font-family: monospace;
         font-style: normal;
         overflow: auto;
         max-height: 15em;
         border: 1px solid #aaa;
      }

Gruss

MrMurphy

[augustq]

Hallo Matthias,

Breite in Pixel, overflow scroll und schon geht es. Danke AugustQ

PS: overflow:auto probiere ich noch mal aus.

[Vollzitat entfernt]

[augustq]

Hallo Matthias,

overflow:auto geht auch, ist sogar die bessere Lösung.

AugustQ

[Vollzitat entfernt]