Heim  >  Artikel  >  Web-Frontend  >  Kann ich mit HTML und CSS horizontale Bildlaufleisten sowohl am oberen als auch am unteren Rand einer Tabelle haben?

Kann ich mit HTML und CSS horizontale Bildlaufleisten sowohl am oberen als auch am unteren Rand einer Tabelle haben?

Susan Sarandon
Susan SarandonOriginal
2024-10-30 20:48:30239Durchsuche

Can I Have Horizontal Scrollbars at Both the Top and Bottom of a Table Using HTML and CSS?

Horizontale Bildlaufleisten oben und unten

Frage:

Ist das möglich? horizontale Bildlaufleisten sowohl oben als auch unten in einer großen Tabelle nur mit HTML und CSS?

Antwort:

Ja, Sie können oben eine zweite horizontale Bildlaufleiste simulieren eines Elements.

Implementierung:

Erstellen Sie ein „Dummy“-Div über der Tabelle mit horizontalem Scrollen. Dieses Div sollte gerade groß genug für eine Bildlaufleiste sein.

Fügen Sie Ereignishandler an das Bildlaufereignis sowohl des Dummy-Div als auch der tatsächlichen Tabelle an. Dadurch wird das Scrollen beider Bildlaufleisten synchronisiert, wenn eine davon verschoben wird.

Codebeispiel:

HTML:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content here -->
  </div>
</div></code>

CSS:

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

JavaScript:

<code class="javascript">$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

Live-Beispiel:

Sehen Sie sich das [Live-Beispiel] (Fiddle-Link hier) an, um den Effekt zu veranschaulichen.

Das obige ist der detaillierte Inhalt vonKann ich mit HTML und CSS horizontale Bildlaufleisten sowohl am oberen als auch am unteren Rand einer Tabelle haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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