html - 使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>

但是当第一列中的文本(例如“Type A”)太长时，它会换行。然后同一行中的数据不在同一行中。 (“Type 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>

我必须绘制边框以使其看起来像一张 table 。在 cshtml 文件中呈现。

我该如何解决这个问题？非常感谢。

Answer 1

您可以在 CSS 中添加 border: 1px solid black; 使其看起来像一个表格。对于 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>