augustq: Tabelle mit horiz. Scrollbalken

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

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

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. 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

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

        1. 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]

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

    2. Hallo Matthias,

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

      PS: overflow:auto probiere ich noch mal aus.

      [Vollzitat entfernt]

      1. Hallo Matthias,

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

        AugustQ

        [Vollzitat entfernt]