Question

我在大表的同一行有2个表，如下所示：

＆＃13;

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

＆＃13;

但是当第一栏中的文字（例如＆＃34; A型和＃34;）太长时，它会生成一个新行。然后同一行中的数据不在同一行。（＆＃34; B＆＃34;与＆＃34; 90％＆＃34;＆＃34; 60％＆＃34;不在同一行;）

返回数据采用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。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用white-space: nowrap;停止自动换行，但它会停止兑现宽度元素。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我假设，你有充分的理由在表格中拥有表格。那你的问题就是你的语义。您没有输出类型B＆＃39;＆＃39; 90％＆＃39;和＆＃39; 60％＆＃39;在大桌子的同一行。您的子表可以由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>

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

3 个答案: