Entire body encompassing table

Question

Entire body encompassing table

I am trying to create an HTML page with a table that spans the entire body and displays scrollbars when needed for both horizontal and vertical scrolling.

Here is my current styling for the table:

table {
  box-shadow: inset 0 0 10px #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

<table>
  <tr>
    <td>test</td>
  </tr>
</table>

Fiddle Link

The issue I'm facing is that by default, a table column will adjust its width based on content. I want to maintain this behavior while enabling horizontal scrolling for too many columns and vertical scrolling for too many rows. The box shadow represents the edges of the table, which I want to always be at least 100% of the viewport with scrollbars if it exceeds this size.

However, as shown in the example, the table does not span the entire viewport. Any ideas on what I might have done wrong?

html css

Answer 1

Answer №1

When it comes to applying overflow on a table element, you may face some limitations as it does not work directly. To overcome this issue, the workaround involves wrapping your table inside two separate div elements.

1. The outer div with the class .wrapper is used for handling overflow:auto when the content of the table exceeds the width of the viewport.

2. The inner div with the class .inner sets up the min-width and max-width properties based on the viewport width. Additionally, it applies display:inline-block to ensure that the div can expand its width if the content surpasses the viewport limit.

Embedding Code Snippet

body {
  margin: 0;
}

div.wrapper {
  height: 100vh;
  width: 100vw;
  overflow: auto;
}

div.inner {
  box-shadow: inset 0 0 30px #000;
  font: 13px Verdana;
  display: inline-block;
  min-height: 100vh;
  min-width: 100vw;
  vertical-align: top;
}

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid;
  padding: 10px;
}

<div class="wrapper">
  <div class="inner">
    <table>
      ...Content goes here...
    </table>
  </div>
</div>

Answer 2

When it comes to applying overflow on a table element, you may face some limitations as it does not work directly. To overcome this issue, the workaround involves wrapping your table inside two separate div elements.

1. The outer div with the class .wrapper is used for handling overflow:auto when the content of the table exceeds the width of the viewport.

2. The inner div with the class .inner sets up the min-width and max-width properties based on the viewport width. Additionally, it applies display:inline-block to ensure that the div can expand its width if the content surpasses the viewport limit.

Embedding Code Snippet

body {
  margin: 0;
}

div.wrapper {
  height: 100vh;
  width: 100vw;
  overflow: auto;
}

div.inner {
  box-shadow: inset 0 0 30px #000;
  font: 13px Verdana;
  display: inline-block;
  min-height: 100vh;
  min-width: 100vw;
  vertical-align: top;
}

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid;
  padding: 10px;
}

<div class="wrapper">
  <div class="inner">
    <table>
      ...Content goes here...
    </table>
  </div>
</div>

Answer 3

Answer №2

Include height: 100vh; in the CSS for the <table> tag to make use of viewport height units.

UPDATE: utilize overflow-y

body {
  margin: 0;
  padding: 0;
  background-color: orange;
}

table {
  box-shadow: inset 0 0 10px #000;
  height: 100vh;
  overflow: scroll;
}

td{
    background-color:red; 
    width: auto;
}

.box{
   overflow: scroll;
   height: 100vh;
   background-color: green;
   width: 15vw;
}

.text{ float:right;}

<div class="box">
  <table>
  <tr>
    <th>ID</th>
  </tr>
  <tr>
    <td>#1</td>
  </tr>
  <tr>
    <td>#2</td>
  </tr>
  <tr>
    <td>#3</td>
  </tr>
  <tr>
    <td>#4</td>
  </tr>
  <tr>
    <td>#5</td>
  </tr>
  <tr>
    <td>#6</td>
  </tr>
  <tr>
    <td>#7</td>
  </tr>
  <tr>
    <td>#8</td>
  </tr>
  <tr>
    <td>#9</td>
  </tr>
  <tr>
    <td>#10</td>
  </tr>
</table>
</div>

<span class="text"> example text in background </span>

This information should be beneficial. The red cell background highlights its span, while the orange background represents the body, and the green background belongs to the table's parent tag. Feel free to add more columns as needed.

Answer 4

Include height: 100vh; in the CSS for the <table> tag to make use of viewport height units.

UPDATE: utilize overflow-y

body {
  margin: 0;
  padding: 0;
  background-color: orange;
}

table {
  box-shadow: inset 0 0 10px #000;
  height: 100vh;
  overflow: scroll;
}

td{
    background-color:red; 
    width: auto;
}

.box{
   overflow: scroll;
   height: 100vh;
   background-color: green;
   width: 15vw;
}

.text{ float:right;}

<div class="box">
  <table>
  <tr>
    <th>ID</th>
  </tr>
  <tr>
    <td>#1</td>
  </tr>
  <tr>
    <td>#2</td>
  </tr>
  <tr>
    <td>#3</td>
  </tr>
  <tr>
    <td>#4</td>
  </tr>
  <tr>
    <td>#5</td>
  </tr>
  <tr>
    <td>#6</td>
  </tr>
  <tr>
    <td>#7</td>
  </tr>
  <tr>
    <td>#8</td>
  </tr>
  <tr>
    <td>#9</td>
  </tr>
  <tr>
    <td>#10</td>
  </tr>
</table>
</div>

<span class="text"> example text in background </span>

This information should be beneficial. The red cell background highlights its span, while the orange background represents the body, and the green background belongs to the table's parent tag. Feel free to add more columns as needed.

Answer 5

Answer №3

Here is a code snippet that might be helpful:

table {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: grey;
  box-shadow: inset 0 0 10px #000;
  overflow: auto; /* Scroll bar will appear if content exceeds fixed dimensions */
}

<table>
  <tr>
    <td>Scroll bar will appear if the content exceeds the fixed dimensions.</td>
  </tr>
</table>

Answer 6

Here is a code snippet that might be helpful:

table {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: grey;
  box-shadow: inset 0 0 10px #000;
  overflow: auto; /* Scroll bar will appear if content exceeds fixed dimensions */
}

<table>
  <tr>
    <td>Scroll bar will appear if the content exceeds the fixed dimensions.</td>
  </tr>
</table>

Entire body encompassing table

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to utilize a single component for validating two other components?

Vertical centering issue with div specifically in Safari

Chaos in the IE8 drop-down menu situation

Unique rephrased text: "Amongst a backdrop devoid of white,

Sending a file through an Ajax POST request to a PHP server

Height adjustment for flexbox children

Is it possible to view the CSS of a PDF file in print template mode using Chrome?

"Difficulties with Tribute Page Project on FreeCodeCamp: HTML and

Utilizing ionic-scroll for seamless movement and scrolling of a canvas element

Master Angular Autocompletion

Highcharts' labels on the x-axis do not automatically rotate

When the content in the div exceeds its boundaries, it causes it to overlap with

Adding CSS files to a JSP page in a Struts2 application

Is there a way to align the height of a standard column with the ng-include section to ensure a cohesive page display?

"Encountering issue with SCSS variable not being applied to background in file

Animation of scrolling in a horizontal layout

Form fields will not automatically populate with link parameters; the user must manually input the information

"Internet Explorer text input detecting a keyboard event triggered by the user typing in a

Tips for achieving a full div image on hover

Utilizing AngularJS, implement ng-form and ng-repeat to seamlessly handle input validation and submission actions