CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12517

Get div display table to have the typical dividing lines

this is my code: http://jsfiddle.net/spadez/Nz9pY/14/

I'm trying to get the dividing lines between each column like I should have if it were a real table rather than a div with the table properties?

My research told me to add these lines but it doesnt do anything:

.table   { display: table; border-collapse: collapse;}
.tablerow  { display: table-row; border: 1px solid #000;}
.tablecell { display: table-cell; }

Upvotes: 0

Views: 51

Answers (4)

reggaemahn
reggaemahn

Reputation: 6668

Add a border to your css

#wrapper div {
    display: table-cell;
    text-align: center;
    border-right: 1px solid black;
}

FIDDLE

Update:

To remove the border on the last div, use the following instead:

#wrapper div:not(:last-child){      
    border-right: 1px solid black;
}

FIDDLE

Upvotes: 1

Michael Brenndoerfer
Michael Brenndoerfer

Reputation: 4086

You mean this?

#wrapper div {
   border: 1px solid #000;
}
#wrapper div:not(:first-child) {
   border-left: none; 
}

jsFiddle

Upvotes: 1

W.D.
W.D.

Reputation: 1041

Give border-left to yout div elements inside your #wrapper element and also border-right to the last div.

DEMO 

#wrapper div {
    display: table-cell;
    text-align: center;
    border-left:1px solid
}

#wrapper div:last-child{
    display: table-cell;
    text-align: center;
    border-right:1px solid
}

EDIT

If you want all the borders to be visible

DEMO 2

#wrapper div {
    display: table-cell;
    text-align: center;
    border-left:1px solid;
    border-top:1px solid;
    border-bottom:1px solid    
}

#wrapper div:last-child{
    display: table-cell;
    text-align: center;
    border-right:1px solid
}

Upvotes: 1

SW4
SW4

Reputation: 71230

Adding that CSS wont work because you have no elements using those classes, you could simply add:

Demo Fiddle

border: 1px solid #000; to your CSS for #wrapper div

For no double internal; borders, use the below CSS:

Demo Fiddle

#wrapper {
    display: table;
    table-layout: fixed;
    width:100%;
}
#wrapper div {
    display: table-cell;
    text-align: center;
    border: 1px solid #000;
    border-right: none;
}
#wrapper div:last-child {
    border-right: 1px solid #000;
}
#wrapper div:hover {
    background-color:red;
}
.lrg {
    display: block;
    font-size: 30px;
}

Upvotes: 2

Related Questions