Html Question posted in
Some basic documentation can be found here.

Html – DIV that needs to be centered along with zooming and scrolling at the same time

In the snippet below, I have an overflow-x: auto; DIV containing a large table with a given width which will have a horizontal scrollbar.

There’s also an Info Bar right below the table that always needs to stay centered both on (1) zooming in/out (Ctrl+/-, larger/smaller resolutions) and (2) scrolling.

You can see that if I go with the position: relative approach, the (1) Zooming keeps the bar centered, but (2) scrolling the table breaks the centering. The text string slides with the scrolling.

Alternatively, if I go with the position: absolute approach, the (2) Scrolling keeps the bar centerd, but (1) the Zooming breaks the centering.

I need to keep the string centered at all times both on Zooming and Scrolling. Also, the "No Results" bar can’t be outside the wrapper because it can’t appear below the scrollbar, it must be above it. Also, there are various tables and table widths, so the width:400px is just an example; I need some kind of dynamic solution for various widths.

.tableWrapper {
   overflow-x: auto;
   width: 400px;
   height: 100px;
}

table {
   border: 1px solid black;
   font-size: 18px;
}

.infoDiv {
    /* PROBLEM:
       1) if position: relative, as right now, zooming in/out works, but scrolling breaks
       2) if position: absolute, scrolling works, but zooming in/out breaks
    */
    
    /* position: relative option */
    position: relative;
    text-align: center;
}

.infoDiv2 {
    /* position: absolute option */
    position: absolute;
    left: 150px;
}
APPROACH 1
<div class="tableWrapper">
   <table class="table">
      <thead>
         <th>Column 1</th>
         <th>Column 2</th>
         <th>Column 3</th>
         <th>Column 4</th>
         <th>Column 5</th>
         <th>Column 6</th>
         <th>Column 7</th>
         <th>Column 8</th>
         <th>Column 9</th>
         <th>Column 10</th>
      </thead>
      <tbody>
      </tbody>
   </table>
   
   <div class="infoDiv">
      No Results Found
   </div>
</div>

APPROACH 2
<div class="tableWrapper">
   <table class="table">
      <thead>
         <th>Column 1</th>
         <th>Column 2</th>
         <th>Column 3</th>
         <th>Column 4</th>
         <th>Column 5</th>
         <th>Column 6</th>
         <th>Column 7</th>
         <th>Column 8</th>
         <th>Column 9</th>
         <th>Column 10</th>
      </thead>
      <tbody>
      </tbody>
   </table>
   
   <div class="infoDiv2">
      No Results Found
   </div>
</div>
Tags:

2

Answers


  1. 0

    Try this:

    .tableWrapper {
  overflow-x: auto;
  width: 400px;
  height: 100px;
}

table {
  border: 1px solid black;
  font-size: 18px;
}

.infoDiv {
  /* position: relative option */
  position: fixed;
  text-align: center;
  width: inherit;
}
    <div class="tableWrapper">
  <table class="table">
    <thead>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
    </thead>
    <tbody>
    </tbody>
  </table>

  <div class="infoDiv">
    No Results Found
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Try position: sticky

    The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor). MDN

    .infoDiv2 {
  position: sticky;
  left: 0;
  right: 0;
  text-align: center;
}

    .tableWrapper {
  position: relative;
  overflow-x: auto;
  width: 400px;
  height: 100px;
  outline: 1px solid blue;
}

table {
  border: 1px solid black;
  font-size: 18px;
}

.infoDiv2 {
  position: sticky;
  left: 0;
  right: 0;
  text-align: center;
  outline: 1px solid red;
}

body {
  padding: 30px;
}
    <div class="tableWrapper">
  <table class="table">
    <thead>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
    </thead>
    <tbody>
    </tbody>
  </table>

  <div class="infoDiv2">
    No Results Found
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search