Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie erstelle ich in HTML und CSS horizontale Bildlaufleisten oben und unten in einer Tabelle?

Barbara Streisand
Freigeben: 2024-10-30 15:53:02
Original
468 Leute haben es durchsucht

How to Create Horizontal Scrollbars at Both Top and Bottom of a Table in HTML and CSS?

So platzieren Sie horizontale Bildlaufleisten oben und unten in einer Tabelle in HTML und CSS

Um den Bedarf an einer horizontalen Bildlaufleiste zu decken Sowohl am oberen als auch am unteren Rand einer großen Tabelle ist es nicht direkt möglich, nur HTML und CSS zu verwenden. Es gibt jedoch eine effektive Lösung, um das Vorhandensein von zwei Bildlaufleisten zu simulieren.

Der Trick besteht darin, ein „Dummy“-Div über der Tabelle zu positionieren und ihm eine Höhe zu verleihen, die gerade ausreicht, um eine horizontale Bildlaufleiste aufzunehmen. Dieses Dummy-Div dient als „zweite“ Bildlaufleiste.

Um die Synchronisierung zwischen dem Dummy-Div und der tatsächlichen Tabelle aufrechtzuerhalten, werden Ereignishandler an beide Elemente angehängt. Immer wenn die Bildlaufleiste eines Elements verschoben wird, wird das andere Element entsprechend aktualisiert, um sicherzustellen, dass beide Bildlaufleisten synchron bleiben.

Eine interaktive Demonstration finden Sie in der bereitgestellten Geige:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div></code>
Nach dem Login kopieren
<code class="css">.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.wrapper1 {
  height: 20px;
}

.wrapper2 {
  height: 200px;
}

.div1 {
  width: 1000px;
  height: 20px;
}

.div2 {
  width: 1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}</code>
Nach dem Login kopieren
<code class="javascript">$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>
Nach dem Login kopieren

Durch den Einsatz dieser Technik können Sie das Vorhandensein horizontaler Bildlaufleisten oben und unten in Ihrer Tabelle effektiv nachahmen und so Ihren Benutzern eine bequeme Navigation ermöglichen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in HTML und CSS horizontale Bildlaufleisten oben und unten in einer Tabelle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!