After fetching image metadata from an API call, a table is dynamically generated on page load. Subsequently, when new images are uploaded, the function responsible for building the table is called again to include this new data. However, despite the CSS styles being properly displayed in the "Inspect Element" tool, the column width styling does not render on the actual page. Strangely, other column styles like text-align work as expected once the table is rebuilt. The correct styling only appears after refreshing the page. Below is the relevant function.
function getMedia(blockName) {
$(".illustrationsContent").empty();
$("#filterTestKey").empty();
$.ajax({
url: [url] + blockName.trim(),
type: 'GET',
dataType: 'json',
async: false,
success: function (media) {
var testKeys = [];
if (media.length > 0) {
$(".illustrationsNoContent").hide();
} else {
$(".illustrationsNoContent").show();
}
for (var i = 0; i < media.length; i++) {
var newRow = "<tr class='illustrationsContent'><td style='width: 20%;'>" + media[i].Question + "</td>"
+ "<td>" + media[i].Name + "</td>"
+ "<td style='text-align: center; width: 15%'>" + "<button type='button' class='delete' disabled>Delete</button>" + "</td></tr>";
testKeys.push(media[i].Question);
$("#illustrationsTable tbody").append(newRow);
}
testKeys = jQuery.uniqueSort(testKeys);
if (testKeys[0] == blockName) {
$("#filterTestKey").hide();
$("#TestKeyLabel").show();
} else {
$("#TestKeyLabel").hide();
$("#filterTestKey").append(new Option("All Test Keys", "All Test Keys"));
for (var i = 0; i < testKeys.length; i++) {
$("#filterTestKey").append(new Option(testKeys[i], testKeys[i]));
}
}
}
});
}
Thank you!