Doubt with table in div css

Question

Doubt with table in div css

Navigation

#1 by (3 votes)
#2 by (2 votes)

0

I'm setting up a table in div and css, the problem and I need the div div-table-row to have the size of the other divs. but it is giving a line break. How do I resolve this?

Follow my code:

.div-table{
                display:table;
                width: 502px;
            }
            .div-table-row{
                display:table-row;
                width: 50%;
            }
            .div-table-col{border: 1px solid #484848;
                display:table-cell; 
                padding: 5px; 
                width: 50%;
            }

<div class='div-table'>
                    <div class='div-table-row'>
                        <div class='linha font-2'>nosdaasdme nodasdasdme nosdasdasdsdme</div>
                    </div>
                    <div class='div-table-row'>
                        <div class='div-table-col font-1'>(ID: ) - QTD:</div>
                        <div class='div-table-col font-1'>R$</div>
                        <div class='div-table-col font-1'>MOUSE</div>
                    </div>
                </div>

html css

asked by anonymous 08.03.2016 / 19:05

2 answers

2

Option 01

.div-table{ display:table; width: auto;}
.div-table-row{display:table-row;width: 33%;  /*se quiser pode colocar auto neste também*/}
.div-table-col{border: 1px solid #484848;display:table-cell;padding: 5px;width: 33%;}

Option 02

.div-table{ display:table; width: 33%;}
.div-table-row{display:table-row;width: 33%;}
.div-table-col{border: 1px solid #484848;display:table-cell;padding: 5px;width: 33%;}

Tip:

Always try to spread the width on both divs so as not to distort, try using twitter bootstrap , it allows you to create responsive layouts without complication

08.03.2016 / 19:18

Adding more fields in form dynamically in Jquery [duplicate] Variable error

score 3 · Accepted Answer

If you are going to structure tabular data then use <table> yourself, this story you probably heard from someone who "uses" tables is wrong " is" barely counted ", actually the problem is use tables to set page layout, such as menus, main columns, and footer, but if you want to display data similar to worksheets then <table> , <tr> , <thead> , <th> , <tbody> , and <td> are your friends, use them.

.minha-tabela {
    border-collapse: collapse;
    width: 100%;
}
.minha-tabela, .minha-tabela td {
    border: 1px #000 solid;
}

<table class="minha-tabela">
<tbody>
    <tr>
        <td colspan="3">nosdaasdme nodasdasdme nosdasdasdsdme</td>
    </tr>

    <tr>
        <td>(ID: ) - QTD:</td>
        <td>R$</td>
        <td>MOUSE</td>
    </tr>
</tbody>
</table>

There is also a tag called <caption> , if you want the first line is actually a "title" to the table, like this:

.minha-tabela {
    border-collapse: collapse;
    width: 100%;
}
.minha-tabela td, .minha-tabela caption {
    border: 1px #000 solid;
}

.minha-tabela caption {
     border-bottom: none;
}

<table class="minha-tabela">
<caption>Titulo</caption>
<thead>
    <tr>
        <td>ID</td>
        <td>Valor</td>
        <td>produto</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>(ID: ) - QTD:</td>
        <td>R$</td>
        <td>MOUSE</td>
    </tr>
</tbody>
</table>