How to put Scroll to table inside div with width 100%?

Question

How to put Scroll to table inside div with width 100%?

Navigation

#1 by (4 votes)

2

The example shows a div with horizontal scroll, but I would like the table along with the div that has scroll to adjust 100% to the size of the screen.

.div {
  border: solid;
  display: inline-block;
  width: 300px;
  overflow: auto;
}
.tablefull td{
    border: solid;
}
.table th{
    border: solid;
  }
.table td {
  padding: 10px;
}

<table class="tablefull">
  <tr>
    <td colspan="2">header</td>
  </tr>

  <tr>
    <td>MENU
    </td>
    <td class="">
      <div class="div">
        <table>
          <thead>
            <tr>
              <th>Desc0</th>
              <th>Desc1</th>
              <th>Desc2</th>
              <th>Desc3</th>
              <th>Desc4</th>
              <th>Desc5</th>
              <th>Desc6</th>
              <th>Desc7</th>
              <th>Desc8</th>
              <th>Desc9</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Item0</td>
              <td>Item1</td>
              <td>Item2</td>
              <td>Item3</td>
              <td>Item4</td>
              <td>Item5</td>
              <td>Item6</td>
              <td>Item7</td>
              <td>Item8</td>
              <td>Item9</td>
            </tr>
                        <tr>
              <td>Item0</td>
              <td>Item1</td>
              <td>Item2</td>
              <td>Item3</td>
              <td>Item4</td>
              <td>Item5</td>
              <td>Item6</td>
              <td>Item7</td>
              <td>Item8</td>
              <td>Item9</td>
            </tr>
                        <tr>
              <td>Item0</td>
              <td>Item1</td>
              <td>Item2</td>
              <td>Item3</td>
              <td>Item4</td>
              <td>Item5</td>
              <td>Item6</td>
              <td>Item7</td>
              <td>Item8</td>
              <td>Item9</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2">footer</td>
  </tr>
</table>

css css-display div table

asked by anonymous 30.07.2016 / 22:40

1 answer



                    
        

         
                            Sort MySQL results by preference
                                        Filter numbers not yet registered via SQL

score 4 · Accepted Answer

First of all, a warning: I did not resolve the issue at the point you requested, I restructured HTML as a solution to the problem as a whole.

Basically, I removed the table from the outside, after all, it's a layout and not a table of truth. The inside I kept, because semantically is correct <table> , because they are tabular data.

Important points:

We define position:relative in general in divs, so things like the menu can use height 100% relative to div parent, not to whole page;
In order to get the menu and table of the same height, a div extra ( body ) was created; which enabled us to set the height of the menu;

     

  In order for the  container  of the table to be 100% wide, we created a left margin where the menu fit, but we do not set width (so the div automatically occupies the remaining space. With 100% the result would not be the desired one, because CSS is full of oddities); 
 
  As the menu had a fixed width, we used the position: absolute, so that the table div stays side by side with the menu (using the margin as a trick to not " p> 
  The final touch was the    box-sizing:border-box     in the    overflow:auto     that contains the table, so the scroll bar appears when needed.


 

div { box-sizing: border-box; position: relative; }

.header,.footer,.body { width: 100%; }
.header,.footer,.menu,.table { border: 2px solid #000; }
.body { margin:4px 0; }
.menu { position:absolute; width:100px; height:100%; }
.table { margin-left:104px; overflow:auto; }
td,th {border:2px solid #000}
<div class="header">Header</div>
<div class="body">
  <div class="menu">Menu</div>
  <div class="table">
    <table>
      <thead>
        <tr>
          <th>Desc0</th>
          <th>Desc1</th>
          <th>Desc2</th>
          <th>Desc3</th>
          <th>Desc4</th>
          <th>Desc5</th>
          <th>Desc6</th>
          <th>Desc7</th>
          <th>Desc8Desc8Desc8Desc8Desc8Desc8Desc8Desc8Desc8Desc8</th>
          <th>Desc9</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Item0</td>
          <td>Item1</td>
          <td>Item2</td>
          <td>Item3</td>
          <td>Item4</td>
          <td>Item5</td>
          <td>Item6</td>
          <td>Item7</td>
          <td>Item8</td>
          <td>Item9</td>
        </tr>
        <tr>
          <td>Item0</td>
          <td>Item1</td>
          <td>Item2</td>
          <td>Item3</td>
          <td>Item4</td>
          <td>Item5</td>
          <td>Item6</td>
          <td>Item7</td>
          <td>Item8</td>
          <td>Item9</td>
        </tr>
        <tr>
          <td>Item0</td>
          <td>Item1</td>
          <td>Item2</td>
          <td>Item3</td>
          <td>Item4</td>
          <td>Item5</td>
          <td>Item6</td>
          <td>Item7</td>
          <td>Item8</td>
          <td>Item9</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="footer">Footer</div>