Understanding tables in html / css - html

Question

I am trying to understand tables in html / css, but I don't understand anything of it. I have a lot of questions about it, but i will start with the first one.
Here:
http://www.w3schools.com/cssref/pr_tab_table-layout.asp
they are saying in case of "table-layout: fixed;":
"The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells"
Okay....so it does not depend on the contents of the cell? Let's test it:
I made a table with table-layout: fixed and I gave one column a width of 200px (inline css in the html):
.myTable {
border: 1px solid black;
}
.myTable th,
.myTable td {
border: 1px solid black;
}
<table class="myTable" style="width: auto; table-layout: fixed;">
<tr>
<th>Column A</th>
<th style="width: 200px">Column B</th>
</tr>
<tr>
<td>A1</td>
<td>B1: This is a sentence with a very long word in it, to check what the behavior is of the table in a case like that. Will long words be broken and wrap onto the next line? Thisisaverylongwordyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitis</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
</tr>
</table>
Why that column with width 200px is now bigger than 200px? If the width would not depend on the contents of the cell then I would expect a width of 200px. In this case i would expect that the long word could overflow, but now the table / column is adjusting its width.
Can anyone tell me how this is working and why it's working like that? I know I can solve it with things like word-wrap: break-word; but I want to understand it.

Answer 1

Because you included a long line of unbroken text. By default the browser won't break up that text unless you tell it to with a rule like word-break:break-all;. So it does work as expected, you're just giving it text that it doesn't want to break because that's the default behavior. You'll also see if you remove that long unbroken string of text that the column is 200px wide.
.myTable {
border: 1px solid black;
}
.myTable th,
.myTable td {
border: 1px solid black;
word-break:break-all;
}
<table class="myTable" style="width: auto; table-layout: fixed;">
<tr>
<th>Column A</th>
<th style="width: 200px">Column B</th>
</tr>
<tr>
<td>A1</td>
<td>B1: This is a sentence with a very long word in it, to check what the behavior is of the table in a case like that. Will long words be broken and wrap onto the next line? Thisisaverylongwordyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitisyesitis</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
</tr>
</table>