html中<tr th:each = "">中能使用两个不同的变量吗？

<table class="table table-striped table-hover">
      <thead>
        <tr>
          <th><i class="fas fa-calendar"></i> Date Tweeted</th>
          <th><i class="fas fa-hashtag"></i> Tweet</th>
        </tr>
      </thead>
      <tbody>
        <tr th:each="d : ${dates}">
          <td th:text="${{d}}">Tweet Date</td>
        </tr>
        <tr th:each="t : ${tweets}">
          <td th:text="${{t}}">Tweets</td>
        </tr>
      </tbody>
    </table>

这是目前使用的代码，效果如下：

但预期效果应该是那行字符串在22这个数字的同一行，也就是归属在同一个<tr>内，请问有没有什么办法能把这两个<tr>部分结合起来或者其他方法能达成这种效果吗？谢谢！

html部分

<table class="table table-striped table-hover">
      <thead>
        <tr>
          <th><i class="fas fa-calendar"></i> Date Tweeted</th>
          <th><i class="fas fa-hashtag"></i> Tweet</th>
        </tr>
      </thead>
      <tbody>
        <tr class="concatTr">
          
        </tr>
      </tbody>
</table> 

js部分 

let tds=''
dates.forEach(d=>{
    tds+=`<td>${d}</td>`
}) 
tweets.forEach(t=> {
    tds+=`<td>${t}</td>`
});
document.querySelector('.concatTr').innerHTML=tds;

把数组dates和数组tweets合成一个新数组，新数组元素包含dates和tweets的元素

js可以这样合并

const newArray = [];

const dates = ['d1','d2'];
const tweets = ['t1','t2','t3'];

while(dates.length || tweets.length) {
    newArray.push({
        date: dates.shift(),
        tweet: tweets.shift(),
    })
}

console.log(newArray);
/*
[{"date":"d1","tweet":"t1"},{"date":"d2","tweet":"t2"},{"tweet":"t3"}]
*/

变量是数组吗，如果是数组的话，循环前先拼接成一个数组也行呀

数字和字符串是一一对应吗?是的话，凑成[{数字：1，字符串：“一”}。。。。]，然后循环渲染