Why is there a gap between the two css-tables? but not when I use block instead?

When I give two DIVs display:table there shows up a small gap between the two elements. In a different thread I read that this can happen when you zoom in because someone can't devide two pixels.

But that would not explain why this problem doesn't occur when I give the two DIVs display:block, no matter how much I zoom, there is no gap.

So my question is why is there a difference and how can I avoid the gap between the "tables" from happening?

Thank you for the help...

Two Tables

.grid_container {
    display: grid;
    height: 600px;
    width: 50%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.grid_item {
    width: 100%;
    height: 100%;
}

.grid_item_content {
    width: 100%;
    height: 100%;
    transition: transform 3s;
    transform-style: preserve-3d;
}

.item_content_front {
    background-color: #d3dce6;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    display: table;

}

.item_content_back {
    background-color: #cfb0b1;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(.5turn);
    backface-visibility: hidden;
    margin-top: -300px;
    display: table;

}

p {
    display: table-cell;
    width: 100%;
    height:100%;
    vertical-align: middle;
    text-align: center;
}

.grid_item:hover .grid_item_content {
transform: rotateY(.5turn);
}

<!DOCTYPE html>

<html>
    
    <head>
     <meta charset="UTF-8"/>
<link rel="stylesheet" href="style/style1.css"/>
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

        <body>
            <div class="grid_container">
                
                <div class="grid_item" id="grid_item_1">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Brauerei
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Unsere Biere
                            </p>
                        </div> 
                  </div>
                </div>
                
                <div class="grid_item" id="grid_item_2">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Restaurant
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Öffnungszeiten
                            </p>
                        </div> 
                  </div>
                </div>
                                
                <div class="grid_item" id="grid_item_3">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Philosophy
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Beer gut, alles gut...
                            </p>
                        </div> 
                  </div>
                </div>
                
                <div class="grid_item" id="grid_item_4">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Culture
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Sudwerk
                                Stammtisch
                            </p>
                        </div> 
                  </div>
                </div>
                
            </div>

<script src="js/code1.js"></script>
        </body>

</html>

Solution

You're right, it's a problem with subpixels. It looks like the width calculations for block and table elements are done slightly differently when the parent isn't a whole-pixel width (on Chrome, at least), resulting in a difference of ~0.4px.

You can fix it either by setting the display to block, or adding a subpixel to the width through calc(100% + 0.5px).

.a {
    background: red;
    height: 100px;
    width: 50%;
}

.b {
    background: yellow;
    width: 100%;
    height: 100%;
    display: table;
}

.d {
    display: block;
}

.c {
    width: calc(100% + 0.5px);
}

<div class="a">
    <div class="b">normal</div>
</div>
<div class="a">
    <div class="b c">display: block</div>
</div>
<div class="a">
    <div class="b d">width: calc(100% + 0.5px)</div>
</div>