html - 使一张 table 看起来像两张 table

我有一个由样式表控制的表。
桌子是由我的老板希望它看起来像的海报创建的。我遇到的问题是海报上的两列之间有空隙。

我尝试仅将两个表并排放置，但是如果在移动设备上查看，这会导致我遇到问题，所以我尝试添加一列，该列的左右边界和背景颜色与页面的其余部分相同，但是我无法摆脱样式表中的顶部/底部边框。

样式表。

.table__container {
  overflow-x: scroll;
  height: 100%;
  width: 100%;
}
table {
  border-collapse: collapse;
}
tr {
  border-bottom: 0px dashed #DDD;
}
table tr th {
  color: #88B53D;
}
table tr th, table tr td {
  vertical-align: top;
}
.row__header {
  border-top: 3px solid #DDD;
}
.row__header--day {
  font-size: 1em;
  text-transform: uppercase;
}

页面上的CSS

.nothing {
        border-left: 1px solid #DDD;
        border-right: 1px solid #DDD;
        border-top: 0px;
        border-bottom: 0px;
        background-color: #eee;
    }

HTML表格

<div class="table__container">
                <table width="100%">
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <td class="nothing">Gap should be here</td>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                    <tr class="row__header" style="text-align:center;">
                        <th class="row__header--day"></th>
                        <td></td>
                        <td></td>
                        <td class="nothing">Gap should be here</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>

样式表是作为我们品牌推广的一部分提供给我的，因此我不能过多地使用它。

最佳答案

这是预期的结果吗？如果是，那么我将添加一些解释。

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

table tr td.gap{
  width:40%;
  text-align:center;
  border:none;
}

table tr td{
  border:1px solid #000
}

<div class="table__container">
    <table width="100%">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td class="gap"></td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td class="gap"></td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</div>