Why do these two identical tables behave differently based on browser width?

Question

I have these two identical tables but they behave differently when the browser width changes.

Seems like one overflows while the other shrinks to fit the width of the browser. But why does this happen?

<div id="article-body">
  <br>
  <table style="border-collapse:collapse;" cellspacing="5" cellpadding="5" bordercolor="#ccc" border="1" align="center">
      <thead>
          <tr>
              <th scope="col">One Tow Three</th>
              <th scope="col">Two Four One</th>
              <th scope="col">Three to The One Two</th>
              <th scope="col">Fiour Something Hljfal lkdsjfals ladskjfalsd  dlkafjsdl asdlkfj ere</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>one cool drive</td>
              <td>overdrive pedals everywhwere<br>
              </td>
              <td>three</td>
              <td>four</td>
          </tr>
          <tr>
              <td>five</td>
              <td>six</td>
              <td>seven</td>
              <td>eight</td>
          </tr>
      </tbody>
  </table>
  <br>
  <br>
  <table style="border-collapse:collapse;" cellspacing="5" cellpadding="5" bordercolor="#ccc" border="1" align="center">
      <thead>
          <tr>
              <th scope="col">Awesome Table Here</th>
              <th scope="col">Another Col</th>
              <th scope="col">Another One here</th>
              <th scope="col">Four Five</th>
              <th scope="col">Six</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>sjflsj</td>
              <td>lgsjdfkljgslkdfgjlksdfjg</td>
              <td>lsdfjgklsjfg<br>
              slkfdgjlksdfjglj<br>
              </td>
              <td>sflkjglksfdjg</td>
              <td>glksdjfgkljsf</td>
          </tr>
          <tr>
              <td>kljfglksjdfklg</td>
              <td>slkdrjglksfdjgqgsjdflkgjsdflkgj</td>
              <td>lfksjglkdfjglkjq1</td>
              <td>sdfjglksdfjglk</td>
              <td>flgkjsdlkfj sdfjglksj . gslkdfjgl lsdfhgj</td>
          </tr>
      </tbody>
  </table>
  <br>
</div>

JsBin here.

As you can see in the bin, there is no CSS attached and they still behave differently. But why?

Been chasing this bug for a couple of days so any help would be appreciated.

Answer 1

I'm assuming it's because of your columns. You have an extra column of content in the last table.

EDIT: It's because the th tags are being stretched by the content in them. The width is being stretched along with the width of the content.

Answer 2

Your tables aren't identical at all. Different content. Different number of columns.

If you want them to be the same width though, you need to set the table widths.

table {
  width: 100%;
}

  <div id="article-body">
    <br>
    <table style="border-collapse:collapse;" cellspacing="5" cellpadding="5" bordercolor="#ccc" border="1" align="center">
        <thead>
            <tr>
                <th scope="col">One Tow Three</th>
                <th scope="col">Two Four One</th>
                <th scope="col">Three to The One Two</th>
                <th scope="col">Fiour Something Hljfal lkdsjfals ladskjfalsd  dlkafjsdl asdlkfj ere</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>one cool drive</td>
                <td>overdrive pedals everywhwere<br>
                </td>
                <td>three</td>
                <td>four</td>
            </tr>
            <tr>
                <td>five</td>
                <td>six</td>
                <td>seven</td>
                <td>eight</td>
            </tr>
        </tbody>
    </table>
    <br>
    <br>
    <table style="border-collapse:collapse;" cellspacing="5" cellpadding="5" bordercolor="#ccc" border="1" align="center">
        <thead>
            <tr>
                <th scope="col">Awesome Table Here</th>
                <th scope="col">Another Col</th>
                <th scope="col">Another One here</th>
                <th scope="col">Four Five</th>
                <th scope="col">Six</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>sjflsj</td>
                <td>lgsjdfkljgslkdfgjlksdfjg</td>
                <td>lsdfjgklsjfg<br>
                slkfdgjlksdfjglj<br>
                </td>
                <td>sflkjglksfdjg</td>
                <td>glksdjfgkljsf</td>
            </tr>
            <tr>
                <td>kljfglksjdfklg</td>
                <td>slkdrjglksfdjgqgsjdflkgjsdflkgj</td>
                <td>lfksjglkdfjglkjq1</td>
                <td>sdfjglksdfjglk</td>
                <td>flgkjsdlkfj sdfjglksj . gslkdfjgl lsdfhgj</td>
            </tr>
        </tbody>
    </table>
    <br>
  </div>