In the process of creating a review page for my app that showcases uploaded files, I've encountered an issue. Whenever a user uploads files with errors, I want to display a warning message below each specific file. Currently, I'm able to show the error messages but they appear disconnected from the file names in the table layout. I'm unsure how to properly align the error messages below the corresponding file names.
Here is the HTML code:
<tr ng-repeat="file in files">
<td class="name-col">{{file.name}}</td>
<td class="description">{{file.description}}</td>
<td class="error-message">{{file.error_message}}</td>
</tr>
And here is the CSS styling:
table {
table-layout: fixed;
margin-bottom: 0;
margin-top: 8px;
th {
text-transform: uppercase;
}
td, td span {
word-break: break-all;
}
}