can a table accomplish this

Question

User702049738 posted

Hello Experts;

I have the following sample code below

<table style="display: inline-block; border: 1px solid black; vertical-align: top; width:490px">
<tr>
<td style="vertical-align:top;">
test me |
</td>
<td style="vertical-align:top;">
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
Sorry, your browser does not support inline SVG.
</svg>

</td>
</tr>
<tr>
<td>
people
</td>
</tr>

</table>

The code is not doing what i want.

I want a table with two columns

the first column should contain

test

 people

The second column should contain an image. the second column should be merged as well.

So in total we only have three cells. the biggest cell will be the cell in column 2.

Thanks all help appreciated

Answer 1

User753101303 posted

Hi,

Seems you are looking for https://www.w3schools.com/Tags/att_td_rowspan.asp

Depending on what you want to do on narrow screen (showing the image below ?) you could also move away from a table based design.

Answer 2

User702049738 posted

Rowspan works a bit...the only problem is it creates borders with gap...that makes it looks double. I do not want borders with that kind of gap. I tried posting pics here and i can't post picture from paint to my discussion, when i drag and drop nothing happens. 

Answer 3

User36583972 posted

Hi olybobo,

You can try to use the GridView control and refer the following samples.

merging multiple columns into single column in gridview using asp.net, c#

Merge GridView Cells or Columns in a Row in ASP.Net using C# VB.Net:

Best Regards,

Yong Lu

Answer 4

User-1432620517 posted

Hi,

You can change your code as below using <g class="gr_ gr_4 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="4" data-gr-id="4">rowspan</g> - 

<table style="display: inline-block; border: 1px solid black; vertical-align: top; width:490px">
    <tr>
        <td style="vertical-align:top;">
            Test
        </td>
        <td style="vertical-align:top;" rowspan="2">
            <svg width="400" height="180">
                <rect x="50" y="20" width="150" height="150"
                style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
                Sorry, your browser does not support inline SVG. 
            </svg>
        </td>
    </tr>  
    <tr>
        <td style="vertical-align:top;">
            People
        </td>
    </tr>  
</table>