CODEWITHSUNDEEP
htmlcss
Danie
Danie

Reputation: 163

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

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.

Upvotes: 0

Views: 67

Answers (3)

crs1138
crs1138

Reputation: 946

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>

Upvotes: 0

Joel Harkes
Joel Harkes

Reputation: 11661

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>

Upvotes: 0

Roger Ng
Roger Ng

Reputation: 779

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>

Upvotes: 1

Related Questions