kos0760,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style type="text/css">
table {
display: none;
}
table.open{
display: table;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const table = document.querySelectorAll('table');
const test = (arr, str) => arr.every(td => td.textContent == str);
table.forEach(tbl => {
let td = [...tbl.querySelectorAll('.color-val')];
const hide = test(td, '-');
if(hide){
let title = tbl.querySelector('.color-title')
title && td.push(title);
td.forEach(el => el.classList.add("collapse"))
};
tbl.classList.add("open")
});
})
</script>
</head>
<body>
<div class="row">
<div class="col">
<div class="h4 text-center">Таблица 1</div>
<table class="table table-bordered">
<thead>
<td>Номер</td>
<td class="color-title">Цвет</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="color-val">-</td>
</tr>
<tr>
<td>2</td>
<td class="color-val">-</td>
</tr>
<tr>
<td>3</td>
<td class="color-val">-</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<div class="h4 text-center">Таблица 2</div>
<table class="table table-bordered">
<thead>
<td>Номер</td>
<td class="color-title">Цвет</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="color-val">-</td>
</tr>
<tr>
<td>2</td>
<td class="color-val">Синий</td>
</tr>
<tr>
<td>3</td>
<td class="color-val">-</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<div class="h4 text-center">Таблица 3</div>
<table class="table table-bordered">
<tbody>
<tr>
<td>1</td>
<td class="color-val">-</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>