html - オーバーフロー: 非常に長いセルの colgroups で非表示が機能しない

Question

私はstackoverflowとgoogleでかなり検索しました。しかし、解決策を見つけることができませんでした。11 列のテーブルがあり、その最初の列は長いテキスト (スペースなし) を取得できます。colgroup アプローチに適応しましたが、うまくいきません。

.mytable {
  table-layout: fixed;
  width: 1000px;
}

th,
td {
  padding: 5px;
}

.ten {
  width: 100px;
  overflow: hidden;
}

.others {
  font-size: 13px;
}

<table border=1 class="mytable">

  <colgroup>
    <col class="ten" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
  </colgroup>

  <thead>
    <tr>
      <th>VERY LONG COLUMN</th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
      <th>I</th>
      <th>J</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
  </tbody>
</table>

固定幅のテーブルが必要です。そして、テキストをラップできるソリューションを探しています。試してみましword-wrap: break-word;たが、正確な出力が得られます。どんな助けでも大歓迎です。

私が試した解決策：

HTML テーブルのワードラップ

how-do-i-wrap-text-with-no-whitespace-inside-a-td