Table Row Not Expanding To Full Width

I have a table and when I set the table to a width of 100% and the table rows to a width pf 100% nothing happens or changes to the width.

Solution 1:

Remove display: block in .Table-Normal

Fiddle

.Table-Normal {
    position: relative;
    //display: block;
    margin: 10px auto;
    padding: 0;
    width: 100%;
    height: auto;
    border-collapse: collapse;
    text-align: center;
}

Solution 2:

By specifying display: block you've overriding the default value from the browser stylesheet for the table element: display: table. Removing display: block or replacing it with display: table fixes this.

Solution 3:

As people have mentioned you have to remove display:block; for this to work. If you need to keep scrolling functionality wrap the table inside a div and set overflow rules on that

<div class = "table-container">
   <table>...</table>
</div>

.table-container{
   height:100px
   width:100px
   overflow-x:scroll;
   
   table{
      display: table;
      width:100%;
   }
}