[voraa]

К сожалению код выдаёт 7 таблиц, когда их 2.

Значит вы не все условия своих таблиц написали.

<style>
td {
width: 30px;
height:10px;
}
td>div.cre_creature {
	background-color: red;
}
</style>
<table >
    <tr>
        <td><div>1</div></td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<br>
<table >
    <tr>
        <td><div class="cre_creature">1</div></td>
        <td>2</td>
    </tr>
    <tr>
        <td><div class="cre_creature">3</div></td>
        <td>4</td>
    </tr>
</table>
<br>
<table >
    <tr>
        <td>1</td>
        <td><div>2</div></td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<br>
<table >
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td><div class="cre_creature">3</div></td>
        <td>4</td>
    </tr>
</table>
<br>
<table >
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

<script>
const goodtables = [...document.querySelectorAll('table')]
   .filter(tab => tab.querySelector('td div.cre_creature'))
alert (goodtables.length)  //2
</script>
</body>

Четко напишите, чем нужная таблица отличается от ненужной. Что в ней есть, чего нет в других.

Почему вы пишете 'div[class^="cre_creature"]', а не 'div.cre_creature' ?
В этом есть какой то особый смысл?