сделать две ячейки в одной строке 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>

Но когда текст в первой колонке (например, «Тип А») слишком длинный, он создает новую строку. Тогда данные в одной строке не совпадают. («Тип 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> 

я должен сделать границы, чтобы сделать его выглядят как одна таблица. Render в файле 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>