html - ブートストラップとの互換性を保ちながら、テーブルに複数の列にまたがる 2 つの行を含めるにはどうすればよいですか?

Question

Web アプリケーションでブートストラップを使用しています。table-stripedブートストラップのクラスを使用しながら、テーブル デザイン レイアウトを機能させようとしています。現在、私は以下を使用しています：

<table>
  <thead>
    <th>ID</th>
    <th>Name</th>
    <th>Department</th>
    <th>Started</th>
  </thead>
  <tbody>
    <tr>
      <td>6</td>
      <td>
         <div>John Doe</div>
         <div>12 Sales Total; 4 March, 3 April, 12 July, 14 August</div>
      </td>
      <td>Sales</td>
      <td>Feb. 12th 2010</td>
    </tr>
  </tbody>
</table>

12 Sales Total; 4 March, 3 April, 12 July, 14 Augustただし、テーブルの が下に表示John Doe Sales Feb. 12th 2010され、現在の列にラップされないようにしたいと考えています。2 つの個別<tr>の要素を使用してレイアウトを機能させると、table-striped正しく機能しなくなります。

編集：

というわけで現在の編成はこちら。これは、divのテキストが他の列にまたがらず、現在の列内で折り返されるという問題を除いて、私が望むものを取得します. https://jsfiddle.net/AkT6R/

@Bryceが提出した回答で言及されたものを以前に試しましたが、これはBootstrapと互換性がないようです。https://jsfiddle.net/AkT6R/1/