Как я могу иметь две строки в моей таблице, которые охватывают несколько столбцов, при этом все еще совместимы с загрузкой?

Я использую bootstrap с моим веб-приложением. Я пытаюсь получить макет дизайна таблицы для работы, все еще имея возможность использовать класс bootstrap 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, а не теперь в столбце, в котором он находится. Если я использую два отдельных элемента <tr>, чтобы заставить макет работать, то table-striped перестает работать должным образом.

Edit:

Итак, вот текущая настройка. Это получает то, что я хочу, за исключением проблемы, когда текст в div не распространяется на другие столбцы и просто обертывается внутри текущего столбца. http://jsfiddle.net/AkT6R/

Я пробовал что-то раньше, что было упомянуто в представленном ответе @Bryce, но это несовместимо с Bootstrap. http://jsfiddle.net/AkT6R/1/

Ответы

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

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th
{
background-color: #f9f9f9;
}

.table-striped>tbody>tr:nth-child(4n+1)>td,
.table-striped>tbody>tr:nth-child(4n+2)>td
{    background-color: #ff10ff;
}
.table-striped>tbody>tr:nth-child(4n+3)>td,
.table-striped>tbody>tr:nth-child(4n+4)>td
{    background-color: #00ffff;
}

<td colspan="2">