locked
can a table accomplish this RRS feed

  • 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

    Friday, May 4, 2018 6:29 PM

All replies

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

    Friday, May 4, 2018 6:35 PM
  • 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. 

    Friday, May 4, 2018 7:14 PM
  • 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

    Tuesday, May 8, 2018 9:29 AM
  • 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>
    Wednesday, May 9, 2018 6:44 PM