html - 使2个表的同一行中的两个单元格具有相同的宽度

我在大表的同一行中有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>

但是，如果第一列中的文本（例如“ Type 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文件中呈现。

我该如何解决？非常感谢。

最佳答案

您可以将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>

关于html - 使2个表的同一行中的两个单元格具有相同的宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40799865/