Table with width 100% and Scroll

Question

I have a table, where it fits the content you have. That way, I added a width: 100%. She’s the size of a window.

I gave an overflow-x: auto, so she should create a scroll, when smaller. But that’s not what happens, she just takes the scroll, if I add display:block, but that way she loses the width: 100%.

How do I have scroll, but maintain 100% width, with white-space: nowrap; .

Ex: http://jsfiddle.net/CrSpu/9631/

Answer 1

You can do as follows below, added the table within a div:

.my-table {
  overflow-x: auto;
}

table.width {
    width: 100%; /* Optional */
    border-collapse:collapse;
    white-space: nowrap; 
}

td {
  border: 1px solid #000;
}

<div class="my-table">
  <table class="width">
      <tbody>
          <tr>
              <td>Content 1 olha que legal</td>
              <td>Content 2</td>
              <td>Content 3</td>
              <td>Content 4</td>
              <td>Content 5</td>
          </tr>
      </tbody>
  </table>
</div>

Ex.: https://jsfiddle.net/YurePereira/kmj7qgk3/

Answer 2

In reality your table has width: 100%, can prove this by adding border: 1px solid green; à table.width {... and seeing that this one has the 100%. That is, we want each td to be resized (increased, in this case each gets 20%, because it is 5 columns), so it is only:

td{border: 1px solid #000;width: 100px;width:20%;}

If you want the text not to stick to the margins and stay centered:

td{border: 1px solid #000;width:20%;padding:5px 20px;text-align:center;}

EXAMPLE in jsfiddle