Doubt with table in div css

Asked

Viewed 4,022 times

0

I am mounting a table in div and css, the problem is that I need the div div-table-Row to have the size the other Divs. but she keeps breaking lines. How do I fix this?

Follows 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
  • 4

    Why create a table with Divs? Since there is already a table and ,tr, th and td for this? Follow this basic rule, tables are for tabular data and Divs for dividing and organizing the layout. It seems to me you want to put together a list of tabular data then <table> will be right with you. This story that using table is wrong was poorly explained, in fact it is wrong to use for page layouts, but to show tabular data similar to Excel is perfectly acceptable.

  • I’m actually putting together a layout, and I used it as an example.

  • 2

    The visual structure seems to me of tabular data, I think that maybe you have not understood this. Tabular data is the schema that all columns and rows follow the same size proportional to each other. From a query in the term.

2 answers

3


If you’re going to structure tabular data then use <table> same, this story you probably must have heard from someone who "use tables is wrong" is "badly told", actually the problem is to use tables to assemble the page layout, such as menus, main columns and footer, but if you want to display data similar to spreadsheets 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> Do you want the first line to actually be 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>

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 distribute the width on both Ivs so as not to distort, try using the twitter bootstrap, it lets you create responsive layouts without complication

  • didn’t work out, buddy

  • try to run your code on http://codepen.io/pen/

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.