CODEWITHSUNDEEP
javascriptjqueryhtmlcss
WP Learner
WP Learner

Reputation: 830

Can I fixed first div of rows and scroll other divs

I need to fixed first div of rows, and need to scroll other divs horizontally.

Here is my current div set.

I have no idea whether it is possible or not.

.content {
  width: 500px;
  height: 450px;
  padding: 10px;
  text-align: left;
  overflow: auto;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.headings {
  display: block;
}
.headings .heading {
  display: inline-block;
  width: 167px;
  height: 42px;
  background: #66ccff;
  color: #fff;
  font-weight: 600;
  margin-bottom: 4px;
  text-align: center;
  line-height: 42px;
}
<div class="content" id="container">
  <div class="headings">
    <div class="heading">12.00pm</div>
    <div class="heading">12:30pm</div>
    <div class="heading">12:00pm</div>
    <div class="heading">11:30am</div>
    <div class="heading">11:00am</div>
    <div class="heading">10:30am</div>
    <div class="heading">10:00am</div>
    <div class="heading">09:30am</div>
  </div>
  <!-- headings -->
  <div class="headings">
    <div class="heading">How is it</div>
    <div class="heading">Next title</div>
    <div class="heading">Next title 01</div>
    <div class="heading">Next title 02</div>
    <div class="heading">Next title 03</div>
    <div class="heading">Next title 04</div>
    <div class="heading">Next title 05</div>
    <div class="heading">Next title 06</div>
  </div>
  <!-- headings -->
  <div class="headings">
    <div class="heading">How is it</div>
    <div class="heading">Next title</div>
    <div class="heading">Next title 01</div>
    <div class="heading">Next title 02</div>
    <div class="heading">Next title 03</div>
    <div class="heading">Next title 04</div>
    <div class="heading">Next title 05</div>
    <div class="heading">Next title 06</div>
  </div>
  <!-- headings -->
  <div class="headings">
    <div class="heading">How is it</div>
    <div class="heading">Next title</div>
    <div class="heading">Next title 01</div>
    <div class="heading">Next title 02</div>
    <div class="heading">Next title 03</div>
    <div class="heading">Next title 04</div>
    <div class="heading">Next title 05</div>
    <div class="heading">Next title 06</div>
  </div>
  <!-- headings -->
  <div class="headings">
    <div class="heading">How is it</div>
    <div class="heading">Next title</div>
    <div class="heading">Next title 01</div>
    <div class="heading">Next title 02</div>
    <div class="heading">Next title 03</div>
    <div class="heading">Next title 04</div>
    <div class="heading">Next title 05</div>
    <div class="heading">Next title 06</div>
  </div>
  <!-- end of content -->
</div>
<!-- end of content -->

What I want here is make every first div of rows fixed and others need to scroll horizontally. Refer my code snippet posted here.

Let me know whether it is possible or not.

Thanks in Advance

Upvotes: 0

Views: 99

Answers (1)

Chonchol Mahmud
Chonchol Mahmud

Reputation: 2735

I think you want this kind.

       .content {

            height: 255px;
            padding: 10px;
            text-align: left;
            overflow: auto;
            white-space: nowrap;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .headings {
            display: block;
        }
        .headings .heading {
            display: inline-block;
            width: 150px;
            height: 42px;
            background: #66ccff;
            color: #fff;
            font-weight: 600;
            margin-bottom: 4px;
            text-align: center;
            line-height: 42px;
        }
       .time{position:fixed;z-index:9999}
       .text{margin-left:200px;}

       <div class="content" id="container">
            <div class="headings ">
                <div class="heading time">12.00pm</div>
                <div class="text">
                <div class="heading">12:30pm</div>
                <div class="heading">12:00pm</div>
                <div class="heading">11:30am</div>
                <div class="heading">11:00am</div>
                <div class="heading">10:30am</div>
                <div class="heading">10:00am</div>
                <div class="heading">09:30am</div>
                </div>
            </div>
            <!-- headings -->

            <div class="headings">
                <div class="heading time">How is it</div>
                                <div class="text">
                <div class="heading">Next title</div>
                <div class="heading">Next title 01</div>
                <div class="heading">Next title 02</div>
                <div class="heading">Next title 03</div>
                <div class="heading">Next title 04</div>
                <div class="heading">Next title 05</div>
                <div class="heading">Next title 06</div>
                                    </div>
            </div>
            <!-- headings -->
            <div class="headings">
                <div class="heading time">How is it</div>
                                <div class="text">
                <div class="heading">Next title</div>
                <div class="heading">Next title 01</div>
                <div class="heading">Next title 02</div>
                <div class="heading">Next title 03</div>
                <div class="heading">Next title 04</div>
                <div class="heading">Next title 05</div>
                <div class="heading">Next title 06</div>
                                    </div>
            </div>
            <!-- headings -->
            <div class="headings">
                <div class="heading time">How is it</div>
                                <div class="text">
                <div class="heading">Next title</div>
                <div class="heading">Next title 01</div>
                <div class="heading">Next title 02</div>
                <div class="heading">Next title 03</div>
                <div class="heading">Next title 04</div>
                <div class="heading">Next title 05</div>
                <div class="heading">Next title 06</div>
                                    </div>
            </div>
            <!-- headings -->
            <div class="headings">
                <div class="heading time">How is it</div>
                <div class="text">
                <div class="heading">Next title</div>
                <div class="heading">Next title 01</div>
                <div class="heading">Next title 02</div>
                <div class="heading">Next title 03</div>
                <div class="heading">Next title 04</div>
                <div class="heading">Next title 05</div>
                <div class="heading">Next title 06</div>
                    </div>
            </div>
        </div>
            <!-- end of content -->
        </div>
        <!-- end of content -->

Upvotes: 1

Related Questions