I have a table, where it fits the content it has. That way, I added a width: 100% . It is the size of the window.
I gave an overflow-x: auto, so it should create a scroll, when smaller. But that's not what happens, it just takes the scroll, if I add display:block , but this way it loses width: 100% .
How do I have scroll, but keep 100% of the width, with white-space: nowrap; .
Ex : link
You can do as follows, added the table inside 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: link
Actually your table has width: 100% , you can prove this by adding border: 1px solid green; to table.width {... and seeing that it has 100%. That is, we want is that each td be resized (increased, in this case each one gets 20%, because they are 5 columns), then just:
td{border: 1px solid #000;width: 100px;width:20%;}
If you want the text not to be pasted to the margins and be centered:
td{border: 1px solid #000;width:20%;padding:5px 20px;text-align:center;}
EXAMPLE in jsfiddle