テーブルを2つのテーブルのように見せる

Question

私はスタイルシートによって制御されるテーブルを持っています。 テーブルは私の上司が見たいと思うポスターから作成されています。私が持っている問題は、ポスターの2つの列の間に隙間があることです。

2つのテーブルを並べて配置してみましたが、モバイルデベロッパーで表示すると問題が発生しました。そのため、左右に境界線があり、同じ色の背景が残りの列に追加されましたページは、私はカントのトップ/ボトムの境界線からスタイルシートから削除されます。

スタイルシート。私はあまりそれを台無しに傾くよう

.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 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> 

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

ページのスタイルシートは、当社のブランディングの一環として私に与えられました。

Answer 1

これは予期した結果ですか？はいの場合、私はいくつかの説明を追加します。

.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>