table tbody not expanding to full width - html

Question

table {
border:1px solid red;
width:100%;
position: relative;
}
table tbody {
height:100px;
overflow-y:auto;
display:block;
}
table tbody tr {
display:table;
width:100%;
}
td,th {
text-align: center;
}
<div>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
Some reasons, the tbody not expanding with 100%. any one figure-out the issue?

Answer 1

I can see a couple of problems that causes this:
You have css styling on the table tbody tr to: display: table;
And table tbody { display: block; }
Remove those and the issue should be fixed.
Edit: PS, for keeping the table height and a scroll when needed, I would wrap the table in a div and have the div set to something like:
div.table-wrap {
height: 100px;
overflow-y:auto;
}

Answer 2

Regardless of which browser is rendering, the css rule width: 100% sets the element in question to a width of 100% of the parent element. So the table is 100% of its parent element, whatever that is, and on the tbody you have not set a width, so when you set the width of the rows to 100%, it is 100% of the tbody's width, which the browser will set to whatever it feels is appropriate.
If you want to make sure something is as wide as the viewport, set the width to 100vw, or make sure every parent of the element has width 100% all the way up to the html tag.
And as Vitikka pointed out, you shouln't set display:table on the tr tags.

Answer 3

You can use this example, it will work guessing you are using Bootstrap!
<table style="width:100%;">
Inside the table tag, you can add styles without placing them in your CSS file. Another example using Bootstrap:
<table class="bg-dark text-white" style="width:100%;">
You can also style using the style tag any td or tr tag too.
<th class="text-center text-white" style="text-transform:uppercase;">Content goes here</th>