Cara agar table html tidak terputus/terpotong, menjadi 1(satu baris utuh)

Halo teman-teman jumpa lagi dengan kak mitra, kali ini ini kak mitra akan share kegiatan kak mitra seddikit sebagai freelance programmer, heheh jadi gini ceritanya Case ini berawal saat mengharuskan kak mitra membuat table html. dari table html starndar yang sudah ada, source codenya adalah seperti berikut ini

<table style="width:100%" border="1">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico kota yang ada di negara mana Mexico kota yang ada di negara mana</td>
  </tr>
</table>

Dengan hasil output seperti berikut ini :

Perhaitkan pada yang dilingkari merah, nah di sana terdapat dua baris, padahal saya menginginkan satu baris.

oke solusinya seperti berikut tambahkan style="white-space:nowrap" di dalam tag <td , contoh code seprti berikut ini 

<table style="width:100%" border="1">

  <tr>

    <th>Company</th>

    <th>Contact</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Alfreds Futterkiste</td>

    <td>Maria Anders</td>

    <td>Germany</td>

  </tr>

  <tr>

    <td>Centro comercial Moctezuma</td>

    <td>Francisco Chang</td>

    <td style="white-space:nowrap">Mexico kota yang ada di negara mana Mexico kota yang ada di negara mana</td>

  </tr>

</table>

tambahannya ada di warna hijau, dengan hasil output seperti berikut ini 

oke sudah menjadi satu baris..

cara ini berjalan juga untuk bootstrap dan berjalan baik ketika kak mitra gunakan

-----------------------------------------------