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

Javascript: Dynamically Altering Images and Text

Emphasize the current page's menu item for the user viewing it

What is the process for choosing and making changes to a specific portion of a textContent?

Automatically updating markers on Google Maps v3

Optimizing Angular for search engines: step-by-step guide

Hide an Angular button when a page is loaded, depending on the information found in a table

How to efficiently insert multiple values into a MySQL database by utilizing a single HTML option

Creating a Jquery slider animation: step-by-step guide

Ways to dynamically apply styles to the component tag depending on the visibility of its content

Hover over the first element to remove its class and replace it with a different element

Steps to avoid HTML encoding the ' character in Next.js _document.js file

Embedding a CSS file into a PHP class

A design featuring a two-column layout, with one column remaining static while the other

JavaScript does not function properly with dynamically loaded content

Trigger jQuery to play audio files

What causes Google fonts to fail on Heroku but succeed when used locally?

The white background of the .jpg image is conflicting with the white background of the HTML

The arrow extends just a hair below the boundaries of the div, by approximately 1 pixel

"Overlooked by z-index, absolutely positioned overlay causes confusion

How can I incorporate random variables and functions into an if-else function when using Jquery to make #divId droppable?