Fit the container without overflowing the body

Question

I want to fit the multiplication table in the body element so that it will stay within the borders of the bode and adjust automatically if the page is resized.

Now it looks like this(the table goes beyond the body borders):

I tried:

display: block;
overflow: auto;

But it did not do anything. I used this post for reference: Div height 100% and expands to fit content

simplified HTML:

<div class="container">
   <table id="multTable"></table>
</div>

simplified CSS:

html {
  background-color: #9FA5FF;
  height: 100%;
}

body {
  background-color: #E2E3FF;
  margin: 0 auto;
  width: 70%;
  height: 100%;
}
#multTable {
  margin: auto;
  height: 200px;
  overflow-x:scroll;
  overflow-y:scroll;
  display:block;
}

score 1 · Accepted Answer · answered Oct 28 '20 at 21:46

How about making the container div scrollable?

html {
  background-color: #9FA5FF;
  height: 100%;
}

body {
  background-color: #E2E3FF;
  margin: 0 auto;
  width: 10%; /*Change to adequate size*/
  height: 100%;
}
.container {
  overflow: scroll;
  width: 100%;
}

#multTable {
  margin: auto;
  height: 200px;
  /*overflow-x:scroll;
  overflow-y:scroll;
  display:block;*/
}

<div class="container">
   <table id="multTable">
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   <tr>
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
   <tr>
   </table>
</div>

Fit the container without overflowing the body

1 Answers1