Creating tables through div

Question

Creating tables through div

Navigation

#1 by (1 votes)

1

I would like to create a table structure that can have a variable amount of columns, for example, one hour might have only 3 columns and at another time it may have 5 or 6 columns, that number is not limited, that amount columns will not change once after the screen loads.

I'm having trouble aligning them and leaving CSS in a way that fits well with the number of columns I have, for example, Forest of Flowers and Cond Greek in>, has to be under the Condominium column and so on.

Here is my code below:

.content-body {
    display: table-cell;
    position: relative;
    vertical-align: top;
    padding: 40px;
}
    .rowCustom {
        display: -moz-flex;
        display: -webkit-flex;
        display:            flex;
        -webkit-flex-direction:     row;
        -moz-flex-direction:     row;
        flex-direction:     row;
        display:            -webkit-flex;
        display:            -moz-flex;
        table-layout:       fixed;
        width:              95%;
        margin:             0 auto;
        white-space:        nowrap;
      }
      
      .rowCustom div {
        -webkit-flex: 1 1 auto;
        -moz-flex: 1 1 auto;
        flex: 1 1 auto;
        display:            inline-block;
      }

      .column {
        margin:             0 auto;
        padding:            5px;
        text-align:         center;
      }

    .item{  
        display: inline-block;  
        border: 1px solid #ccc;  
        padding: 5px 10px;  
        text-decoration: none;  
        color: #666;      
        font-family: 'Open Sans',sans-serif;  
        font-size: 14px;  
        font-weight :600;  
        border-radius: 5px;  
        -webkit-border-radius: 5px;  
        -moz-border-radius: 5px;  
    }

<link href="https://rawgit.com/twbs/bootstrap/master/dist/css/bootstrap.css" rel="stylesheet"/>
<section role="main" class="content-body">    
    <div class="rowCustom">
        <div class="column">
            Condominio
        </div>
        <div class="column">
            Predio
        </div>
        <div class="column">
            Andar
        </div>
        <div class="column">
            Apartamento
        </div>
        <div class="column">
            Comodo
        </div>
    </div>

    <div class="rowCustom">
        <div class="column">
            <div class="item">Bosque das flores</div> 
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
    </div>

    <div class="rowCustom">
        <div class="column">
        </div>
        <div class="column">
            <div class="item">Orquidea</div>       
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
    </div>

    <div class="rowCustom">
        <div class="column">
        </div>
        <div class="column">            
        </div>
        <div class="column">
        <div class="item">1º Andar</div> 
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
    </div>

    <div class="rowCustom">
        <div class="column">
        </div>
        <div class="column">
        </div>
        <div class="column">
            <div class="item">2º Andar</div> 
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
    </div>

    <div class="rowCustom">
        <div class="column">
        </div>
        <div class="column">
            <div class="item">Rosa</div> 
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
    </div>

    <div class="rowCustom">
        <div class="column">
            <div class="item">Cond Grego</div> 
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
    </div>

    <div class="rowCustom">
        <div class="column">
        </div>
        <div class="column">
            <div class="item">Apolo</div> 
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
        <div class="column">
        </div>
    </div>
</section>

Follow the fiddle

My structure works as follows, in the first row are the columns, and in the following rows are the values, only one of the columns will be filled in each row, each of these rows can have children, which will be added in the row just below and in the subsequent column, the main problem is in aligning the contents of the rows with those of the columns.

If possible, it would be nice if there was a line linking the lines with their respective children, eg: A line linking Orchid to Orchid and Rose and 2nd floor , and so on.

Follow an image, made in paint, of how I hope it stays more or less.

javascript html jquery css css3

asked by anonymous 10.05.2017 / 14:38

1 answer

What is the purpose of the compare function of the qsort function of C ++? How to perform mock in a class?

score 1 · Answer 1

$(document).ready(function () {
        $(".column").css("width", $("#geral").outerWidth() / $(".content-body>.rowCustom:first>div").length);
    });

If you use jquery, do not forget the reference of the lib.

CSS:

.column {
        margin: 0 auto;
        padding: 5px;
        text-align: center;
        border:1px solid #cecece;
    }

HTML:

<div id="geral">
    <link href="https://rawgit.com/twbs/bootstrap/master/dist/css/bootstrap.css" rel="stylesheet" />
    <section role="main" class="content-body">
        <div class="rowCustom">
            <div class="column">
                Condominio
            </div>
            <div class="column">
                Predio
            </div>
            <div class="column">
                Andar
            </div>
            <div class="column">
                Apartamento
            </div>
            <div class="column">
                Comodo
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
                <div class="item">Bosque das flores</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
                <div class="item">Orquidea</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
                <div class="item">1º Andar</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
                <div class="item">2º Andar</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
                <div class="item">Rosa</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
                <div class="item">Cond Grego</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>

        <div class="rowCustom">
            <div class="column">
            </div>
            <div class="column">
                <div class="item">Apolo</div>
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>
    </section>
</div>