CODEWITHSUNDEEP
htmlcss
user3027865
user3027865

Reputation: 11

CSS Table Structure Issue

I am a noob in CSS and i was actually trying to create a table kind of structure using Html Div and CSS, but got stuck in one issue.

Problem is that I have put 4 columns in 1 single row. The last column contains a text area which is expandable. When I try to expand the text area, only the last column expands instead of the whole row.

Below is the code demo:

http://codepen.io/anon/pen/oIChn

Upvotes: 0

Views: 60

Answers (2)

Rares Hideg
Rares Hideg

Reputation: 394

Add this at the end of your css, should do the trick

.r-tab-head{
display: table-row;
float: none;
}

.divCell {
    display: table-cell;
    float: none;
}

Upvotes: 0

SW4
SW4

Reputation: 71150

The code isn't working because you arent following a table structure, which should (always) be:

table
-row
--cell
--/cell
-/row
/table

IN your code, you are using some display:tablexx CSS, however often in elements isolated from other aspects of the table structure they are expecting to be next to, as such the layout is broken.

The correct CSS/HTML structure is (e.g):

Demo Fiddle

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'></div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>
    <div class='row'>
        <div class='cell'></div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>
</div>

CSS

.table {
    display:table;
    height:100%;
}
.cell {
    display:table-cell;
    width:50px;
    height:100px;
    border:1px solid black;
}
.row {
    display:table-row;
}

Note that using this there are no specific thead or tbody sections, you can simply adapt your CSS to style headers etc as appropriate.

Upvotes: 1

Related Questions