Javascript hr在表内，但为全宽

我做了这段代码

  <table>
    {item.awards.map((obj,i) => 
    <tbody>
        <tr>
            <td>Name</td>
            <td>:</td>
            <td>{obj.title}</td>
        </tr>
        <tr>
            <td>Date</td>
            <td>:</td>
            <td>{obj.award}</td>
        </tr>
        {i !== item.awards.length-1 ? <hr /> : ''}
    </tbody>
    )}
  </table>

{item.awards.map（（obj，i）=>
名称
:
{obj.title}
日期
:
{目标奖}
{i！==item.awards.length-1？
：“”
)}

---

它起作用了，每个块都有一个分隔符（

），但现在的问题是hr长度不是全宽。我不能100%制作表格，因为它会影响td。

将

hr

作为

tbody

的直接子对象是无效的

tbody

仅允许

tr

元素（和脚本）。即使它似乎在一个浏览器中工作，也不能保证它在另一个浏览器中工作，或者甚至在它以前工作的下一个dot版本中工作

因此，您需要将

hr

放在

tr

中，这意味着将其放在

td

或

th

中：

{i !== item.awards.length-1 ? <tr><td colspan="3"><hr /></td></tr> : null}

名称
:
{obj.title}
日期
:
{目标奖}

名称
:
{obj.title}
日期
:
{目标奖}

名称
:
{obj.title}
日期
:
{目标奖}

我们可以用小提琴或任何链接来查看您的问题吗？我认为这是无效的HTML。

的子项必须是

，您不能让

在那里。

与以前一样，使用堆栈片段（

[]

工具栏按钮）的可运行性将使您更容易获得帮助。（和以前一样：请注意，堆栈代码段支持React，包括JSX；）@Barmar那么您的解决方案是什么？她希望

是窗口的整个宽度，而不仅仅是表格。@Barmar:正如我所说，根据需要应用CSS样式。我添加了一个可能的CSS设置示例，但当然，这取决于她真正想要什么，这只是模糊地暗示了一下。：-）