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">
<script>
window.addEventListener('DOMContentLoaded', () => {
const table = document.querySelectorAll('table');
const test = (arr, str) => arr.some(td => td.textContent != str);
table.forEach(tbl => {
let td = [...tbl.querySelectorAll('.color-val')];
const show = test(td, '-');
if(show) return;
td.push(tbl.querySelector('.color-title'));
td.forEach(el => el.classList.add("collapse"))
});
})
</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>
</body>
</html>