CODEWITHSUNDEEP
htmlcss
Mercer
Mercer

Reputation: 9986

HTML: how to: “Separate table rows with a vertical line”

I have a basic HTML table which contains table rows. My goal is to separate those table rows with a visible vertical line (for better readibility of the content).

How could I do this? Thank you.

JSFIDDLE

.line {
    border-bottom:1px solid black;
}

.textRotation {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  ;
}

expected result: enter image description here

Upvotes: 0

Views: 320

Answers (3)

Rhumborl
Rhumborl

Reputation: 16609

There are two things to do here:

  1. Apply a border-right to .textRotation to give you the unbroken vertical line.
  2. Add a little padding to the ths in only the rows with data so the text is not squashed up to the line.

The actual data rows start with "Lun" in the 4th tr and go on to the bottom of the table, so you need to use an :nth-child CSS selector of n+4 and apply padding-left to that.

.textRotation {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    border-right: 2px solid black;
}

tr:nth-of-type(n+4) th
{
    padding-left:3px;
}

Updated Fiddle

Upvotes: 2

sodawillow
sodawillow

Reputation: 13176

JsFiddle

tr:nth-of-type(n+3) th
{
    border-left: 1px solid black;
}

Upvotes: 0

Sathish
Sathish

Reputation: 2460

try this.,

.textRotation {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        border-right: 3px solid;/*added one*/
      ;

Upvotes: 2

Related Questions