使兩個單元在同一行2個表都有相同的寬度

Question

我在同一行的大表的2個表，就像這樣：

<table> 
 
     <tr> 
 
      <td>Type</td> 
 
      <td>Storage 1</td> 
 
      <td>Storage 2</td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <table> 
 
        <tr> 
 
         <td>Type A</td> 
 
        </tr> 
 
        <tr> 
 
         <td>Type B</td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
      <td> 
 
       <table> 
 
        <tr> 
 
         <td>10%</td> 
 
        </tr> 
 
        <tr> 
 
         <td>90%</td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
      <td> 
 
       <table> 
 
        <tr> 
 
         <td>40%</td> 
 
        </tr> 
 
        <tr> 
 
         <td>60%</td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 
    <table>

但是當第一列中的文本（例如「A型」）太長，這會形成新的路線。然後同一行中的數據不在同一行中。 （「B型」是不是在同一行以「90％」和「60％」）

返回數據是XML格式的，就像這樣：

<DataGroup Storage="Storage 1"> 
    <DataRow Type="Type A" Percentage="10%"/> 
    <DataRow Type="Type B" Percentage="90%"/> 
</DataGroup> 
<DataGroup Storage="Storage 2"> 
    <DataRow Type="Type A" Percentage="40%"/> 
    <DataRow Type="Type B" Percentage="60%"/> 
</DataGroup> 

我必須繪製邊框使它看起來像一張桌子。在cshtml文件中渲染。

我該如何解決這個問題？非常感謝。

Answer 1

您可以將border: 1px solid black;添加到CSS中，使其像表一樣。對於HTML，您只需要一個table。

table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <td>Type</td> 
 
    <td>Storage 1</td> 
 
    <td>Storage 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Type A 
 
     <br>new line</td> 
 
    <td>10%</td> 
 
    <td>40%</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>Type B</td> 
 
    <td>90%</td> 
 
    <td>60%</td> 
 
    </tr> 
 
</table>

Answer 2

您可以雖然它停止履行寬度元素與white-space: nowrap;停止自動換行。

tr td:nth-child(1){ 
 
    width:20px; 
 
    color:red; 
 
    white-space: nowrap; 
 
}

<table> 
 
<tr> 
 
    <td>Type</td> 
 
    <td>Storage 1</td> 
 
    <td>Storage 2</td> 
 
</tr> 
 
<tr> 
 
    <td>Type A</td> 
 
    <td>10%</td> 
 
    <td>40%</td> 
 
</tr> 
 
<tr> 
 
    <td>Type B</td> 
 
    <td>90%</td> 
 
    <td>60%</td> 
 
</tr> 
 
<table>

Answer 3

我假設，你有一個很好的理由表中有表。那麼你的問題就是你的語義。您不會在大表的同一行上輸出'B型'，'90％'和'60％'。你的子表可以按照vertical-align的順序排列，或者你需要將你的大表語義修改爲這樣的東西。

<table class="big"> 
    <tr> 
     <td>Type</td> 
     <td>Storage 1</td> 
     <td>Storage 2</td> 
    </tr> 
    <tr> 
     <td> 
      <table class="small"> 
       <tr> 
        <td>Type A Lorem ipsum</td> 
       </tr> 
      </table> 
     </td> 
     <td> 
      <table class="small"> 
       <tr> 
        <td>10%</td> 
       </tr> 
      </table> 
     </td> 
     <td> 
      <table class="small"> 
       <tr> 
        <td>40%</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <table class="small"> 
       <tr> 
        <td>Type B</td> 
       </tr> 
      </table> 
     </td> 
     <td> 
      <table class="small"> 
       <tr> 
        <td>90%</td> 
       </tr> 
      </table> 
     </td> 
     <td> 
      <table class="small"> 
       <tr> 
        <td>60%</td> 
       </tr> 
      </table> 
     </td>   
    </tr> 
<table>