Make two cells in same row of 2 tables have same width - html

Question

I have 2 tables in same row of the big table, like this:
<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>
But when the text in first column (e.g. "Type A") is too long, it makes a new line. Then data in same row is not in same row. ("Type B" is not in same row with "90%" and "60%")
Return data is in xml format, like this:
<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>
I have to draw borders to make it look like one table. Render in cshtml file.
How can I resolve this? Many thanks.

Answer 1

You can add the border: 1px solid black; to CSS to make it like a table. For HTML, you just need one 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

You can stop word-wrap with white-space: nowrap; although it stops honoring the width element.
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

I'm assuming, you have a good reason for having tables within table. Then your problem is your semantics. You are not outputting the 'Type B', '90%' and '60%' on the same rows of the big table. Your sub-tables can either be aligned by vertical-align as blocks or you need to rework your big table semantics to something like this.
<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>