Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0
Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User
Log in Register

Make HTML Table from Div Elements

05.07.2018 (👁9564)

Make HTML Table from Div Elements

04.07.2018 (👁19)


 

Under HTML5 one should not use any more HTML Table-Row-TD elements, since these would allegedly slow down the rendering.

But how do you get it when you want to arrange child elements in a row in a div container then in a row

 

The trick is the CSS style setting style = "display: flex; flex-direction: row"

 

https://readdy.net/User_Files/Notes/Images/Image_548_0_blog.jpg" width="909" height="276">

 

Bad situation:

This HTML construct contains a comprehensive div container: divTop, which is to arrange two child elements (divBreadcrumb and divNext) in a table.

As already seen above, the second div region is always arranged below the first div region.

<div id="divTop" class="divTop" style="height:40px;flex-flow:row">

    @*-----< Breadcrumb >-----*@

    <div id="divBreadcrumb" class="divBreadcrumb">

        <a id="btnUserNotes" class="btn path_link" title="User Notes" href="~/user/User_Page/@Model.Project.IDOwner">

            @Model.Ownername

        </a>

    </div>

    @*-----</ Breadcrumb >-----*@

 

 

    @*-----< Breadcrumb >-----*@

    <div id="divNext" class="" style="position:absolute;float:right;">

        <a class="lnkPrev" onclick="goto_Image_Left(-1)">▶ &#10094;</a>

        <a class="lnkNext" onclick="goto_Image_Right(1)">⯇&#10095;</a>

        <a id="lnkGoto" class="path_link" title="Goto" href="">

            Open⭜⮣

        </a>

    </div>

    @*-----</ Breadcrumb >-----*@

</div>

@*-------< divTop >-------*@

 

Solution:

The trick is to enter the parent HTML element with the display: flex and flex-direction: row styles

 

style="height:40px;display:flex;flex-direction:row"

 

https://readdy.net/User_Files/Notes/Images/Image_548_1_blog.jpg" width="909" height="317">

 

https://readdy.net/User_Files/Notes/Images/Image_548_2_blog.jpg" width="908" height="262">

 

OK

Solved HTML CSS style problem

@*-------< divTop >-------*@

<div id="divTop" class="divTop" style="height:40px;display:flex;flex-direction:row">

    @*-----< Breadcrumb >-----*@

    <div id="divBreadcrumb" class="divBreadcrumb">

        <a id="btnUserNotes" class="btn path_link" title="User Notes" href="~/user/User_Page/@Model.Project.IDOwner">

            @Model.Ownername

        </a>

    </div>

    @*-----</ Breadcrumb >-----*@

 

 

    @*-----< Breadcrumb >-----*@

    <div id="divNext" class="" style="">

        <a class="lnkPrev" onclick="goto_Image_Left(-1)">▶ &#10094;</a>

        <a class="lnkNext" onclick="goto_Image_Right(1)">⯇&#10095;</a>

        <a id="lnkGoto" class="path_link" title="Goto" href="">

            Open⭜⮣

        </a>

    </div>

    @*-----</ Breadcrumb >-----*@

</div>

@*-------< divTop >-------*@