Как избежать расширения таблицы атрибутов?

Question

Я пытаюсь создать таблицу и визуализировать данные, полученные от API, мой html css выглядит следующим образом:

///html
<section id="Characters">
    <table id="customers">
      <tr>
        <th><strong>Category</strong></th>
        <th><strong>Name</strong></th>
        <th><strong>Nickname</strong></th>
        <th><strong>Work</strong></th>
        <th><strong>Image</strong></th>

      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

  </section>
//css
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

  width: 200%;
}


#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

Проблема в том, например, когда я получаю данные <th><strong>Name</strong></th> в этом атрибуте этот атрибут расширяется и становится большим, есть ли какой-нибудь элегантный способ решения этой проблемы, я пробовал

tr td {
  word-wrap: break-word;
} and tr   td {
 overflow:hidden;
} 

, но это не работает

Answer 1

Добавить

table{
    table-layout:fixed;
}

Answer 2

Попробуйте:

#customers {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   width: 60%;
   table-layout: fixed; /* <- add this */
}

tr td {
   width: 10%; /* You can custom the width as you need */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
} 

Посмотрите, работает ли оно; D

Answer 3

Добавить:

td {
  word-break: break-word;
}

Answer 4

исправление расположения таблицы и придание ей ширины может исправить это. Попробуйте это

table {table-layout: fixed; ширина: 1000 пикселей;}