原來是<div>與<div>之間的空白字元所造成的啊(恍然大悟!)
我會跑迴圈產生四個為一組的<div>區塊，因此，比較困難去拿掉兩個<div>區塊間的所有泛空白字元。
若是使用<div>的設置padding: 0;，我擔心會影響到其他有使用到div的部分
另外，flex的部分是指整個垂直與水平的排版嗎，有稍微看一下範例，但不太清楚此作法會有什麼不一樣呢?

用 flex 的話，外層容器的 display 要稍微改一下。
外層容器如果是 block 要改成 flex
外層容器如果是 inline-block 則要改成 inline-flex
下面是範例

<style>
    .flex-container{
        display: flex;
    }
    .flex-col{
        display: flex;
        flex-direction: column;
    }
    .content_TestTable {
        height: 20px;
        padding: 3px 3px 3px 3px;
        font-size: 10px;
        font-family: Arial;
        text-align:left;
        vertical-align: top;
        border: 1px solid ;    
        margin:-1px 0 0 -1px;
    }
</style>
<!-- 外層容器要設定為 display: flex 或 inline-flex -->
<div class='flex-container'>
    <div class='flex-col'>
        <div class='content_TestTable'>voltage(V)</div>
        <div class='content_TestTable'>Tmin(°C)</div>
        <div class='content_TestTable'>Tmax(°C)</div>
        <div class='content_TestTable'>Tma(°C) </div>
    </div>
    <div class='flex-col'>
        <div class='content_TestTable'>100</div>
        <div class='content_TestTable'>200</div>
        <div class='content_TestTable'>300</div>
        <div class='content_TestTable'>400</div>
    </div>
</div>

另外移除空白的部分，如果不能改，這邊是有個用 js 移除的方式，合不合用再自己衡量了。
PS. 只是有這想法弄看看，不確定所有瀏覽器正常。(只試過 Firefox、Chrome、Edge)

<div class='flex-col'>
    <div class='content_TestTable'>voltage(V)</div>
    <div class='content_TestTable'>Tmin(°C)</div>
    <div class='content_TestTable'>Tmax(°C)</div>
    <div class='content_TestTable'>Tma(°C) </div>
</div>
<div class='flex-col'>
    <div class='content_TestTable'>100</div>
    <div class='content_TestTable'>200</div>
    <div class='content_TestTable'>300</div>
    <div class='content_TestTable'>400</div>
</div>
<script>
//這段 javascript 會移除同層的所有泛空白字元
(()=>{
    let p=document.currentScript.parentElement;
    Array.from(p.childNodes).forEach((ele)=>{
        if(
            ele.nodeType===Node.TEXT_NODE &&
            ele.textContent.search(/^\s*$/)>=0
        ) {
            p.removeChild(ele);
        }
    });
})();
</script>

frankychen，謝謝!
不過再嘗試使用這個方法實，若要新增第三個div的話，第三個會與第二個重疊，請問若是這樣的話，還可以怎麼調整呢?

https://www.w3schools.com/code/tryit.asp?filename=GE4HY567S31Q

littleit，此方式確實可行，跑版的部分可能會存在，因此這部分我再看看有沒有比較全面的作法可以達到，謝謝你!

恩對啊 你應該要把資料邏輯跟頁面邏輯拆開，而不是要頁面邏輯照你的資料邏輯output 所以你應該先把list 轉成頁面好render的array 格式，看起來格式應該要長這樣(類似)

let data = [
  {
   title:"Voltage",
   values:['100','500','900']
  },
  {
   title:"Tmin",
   values:['200','600','1000']
  }
]

<table>
    {data.map(d =>{
        return 
        <tr>
            <td>
               {d.title}
            </td>
            {
              d.values(v =>{
                  return 
                  <td>
                      {v}
                  </td>
              })
            }
        </tr>
    })}
</table>

那我將我上面的排法讓你了解一下。我的排法就是要給你確定用的

<div class="table">
   <div class="tr">  <!--在這邊可能可以省略這一TR自已試試-->
      <div class="td">
          <div class="sub_table">
             <div class="sub_tr">a</div>
             <div class="sub_tr">b</div>
             <div class="sub_tr">n</div>
             <div class="sub_tr">d</div>
             <!-- 這邊先標題 -->
          </div>
      </div>
      <div class="td">
          <div class="sub_table">
             <!-- 第一個資料-->
             <div class="sub_tr">1</div>
             <div class="sub_tr">2</div>
             <div class="sub_tr">3</div>
             <div class="sub_tr">4</div>
          </div>
      </div>
      <div class="td">
          <div class="sub_table">
             <!-- 第二個資料-->
             <div class="sub_tr">1</div>
             <div class="sub_tr">2</div>
             <div class="sub_tr">3</div>
             <div class="sub_tr">4</div>
          </div>
      </div>
      
      <div class="td">
          <div class="sub_table">
             <!-- 第三個資料-->
             <div class="sub_tr">1</div>
             <div class="sub_tr">2</div>
             <div class="sub_tr">3</div>
             <div class="sub_tr">4</div>
          </div>
      </div>
      
      
   </div>
</div>

可能我用sub_td讓你搞混了。其實那是直列排省略了tr@@"
我沒寫的很完整給你誤會了

只要去生成 這組資料，要幾個就幾個。

對的!是你所表達的意思沒錯~很感謝你的協助!你前面提集的四個方式讓我學到很多~感謝!

不好意思，另外想詢問

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 0px;

}

是指所有的樣式都套用這個css嗎?
但我若調整所有css裡面都放這段，好像就不會作用了呢?
https://www.w3schools.com/code/tryit.asp?filename=GE4O6VO5H7PM

我是比較建議一開始就將所有標籤的預設值都歸零
以你目前的狀況可以直接多寫一個

 body{
      font-size: 0px;
 }

簡化一下是這樣

  body{
      font-size: 0px;
  }
  .col_TestTable {
      display:inline-block;
  }
  .content_TestTable{
      border: 1px solid gray;
      box-sizing: border-box;
      padding:3px 5px;
      font-size: 20px;
      margin: -1px;
    }

好的!目前看潛水員跟yuwen的方式好像可以直接針對div內做調整，因為html有其他人共用，怕會影響到，所以目前會先獨立調整，非常謝謝你的幫忙~

好的，非常謝謝你們，這部分我會再好好研究的!
如果有兩個最佳答案的話，也希望可以選擇您 > <