Css 将错误消息放在我的表行下（样式）

我正在为我的应用程序制作一个审查页面，其中显示上传的文件。我遇到的问题是……当用户上载某些文件时，如果其中有错误，我会显示一条警告消息。我可以显示消息，但我想在上传的每个文件下面显示消息。现在我有文件显示在一个表中，出现了错误消息，但我不知道如何正确修复文件名下面的错误消息

html:

---

将错误消息放在消息摘要之后，而不是放在新列中，怎么样。例如：

<tr ng-repeat="file in files">
     <td class="name-col">{{file.name}}</td>
     <td class="description">
         {{file.description}}
         {{file.error_message}}
     </td>
</tr>

{{file.name}
{{file.description}
{{file.error_message}

另外，我假设file.error_消息从外观上也返回一个元素容器，因此只需确保它是块类型的元素，以便在新行上呈现

---

否则，您可能希望动态创建colspan为2的新行。

您可以在上载的文件名下方显示错误消息，如下所示：

 <tr ng-repeat="file in files">
   <td class="name-col">{{file.name}}<br><span class="has-error">{{file.error_message}}</span></td>
   <td class="description">{{file.description}}</td>
 </tr>

{{file.name}
{{{file.error\u message}
{{file.description}

---

使用bootstrap css类“has error”以红色显示错误消息（如果使用bootstrap）

如果希望错误消息位于其中一列的同一行中，可以使用@Adrianapolis的答案

---

如果要将错误消息放在新行中，可以使用

ng repeat start

和

ng repeat end

指令：

<tr ng-repeat-start="file in files">
    <td class="name-col">
        {{ file.name }}
    </td>
    <td class="description">
        {{ file.description }}
    </td>
</tr>
<tr ng-repeat-end
    ng-show="file.error_message">
    <td colspan="2" class="error-message">
        {{ file.error_message }}
    </td>
</tr>

 <tr ng-repeat="file in files">
   <td class="name-col">{{file.name}}<br><span class="has-error">{{file.error_message}}</span></td>
   <td class="description">{{file.description}}</td>
 </tr>

<tr ng-repeat-start="file in files">
    <td class="name-col">
        {{ file.name }}
    </td>
    <td class="description">
        {{ file.description }}
    </td>
</tr>
<tr ng-repeat-end
    ng-show="file.error_message">
    <td colspan="2" class="error-message">
        {{ file.error_message }}
    </td>
</tr>

<tbody ng-repeat="file in files">
    <tr>
        <td class="name-col">{{file.name}}</td>
        <td class="description">{{file.description}}</td>
    </tr>
    <tr ng-if="file.error_message">
        <td class="error-message">{{file.error_message}}</td>
    </tr>
</tbody>