2

This is my code for my table. Everything is perfect but I want to add something I don't know how to do it and how to style it.

I want to group the rows by adding a title on the left like in the image. Any ideas on how to do this?

UPDATED CODE

<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="7" class="maintitle">title</td> </tr> <tr class="greenline"> <td colspan="2">title</td> <td>title</td> <td>title</td> <td>title</td> <td>title</td> <td>title</td> </tr> <tr> <td rowspan="5">ff</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> </tr> <tr> <td>2</td> <td>text</td> <td>third</td> <td>fourth</td> <td>first</td> <td>second</td> </tr> <tr> <td>3</td> <td>third</td> <td>text</td> <td>fourth</td> <td>first</td> <td>second</td> </tr> <tr> <td>4</td> <td>third</td> <td>fourth</td> <td>text</td> <td>first</td> <td>second</td> </tr> <tr> <td>5</td> <td>second</td> <td>third</td> <td>first</td> <td>text</td> <td>second</td> </tr> <tr> <td rowspan="5">ff</td> <td>text</td> <td>third</td> <td>fourth</td> <td>first</td> <td>second</td> </tr> <tr> <td>7</td> <td>second</td> <td>text</td> <td>third</td> <td>fourth</td> <td>second</td> </tr> <tr> <td>8</td> <td>second</td> <td>third</td> <td>text</td> <td>first</td> <td>second</td> </tr> <tr> <td>9</td> <td>second</td> <td>fourth</td> <td>text</td> <td>first</td> <td>second</td> </tr> <tr> <td>10</td> <td>second</td> <td>third</td> <td>text</td> <td>first</td> <td>second</td> </tr> </table>

CSS:

.maintitle { background:#1b1e24; border-radius:5px 5px 0px 0px; height:40px; font-size:20px; color:#FFF; font-weight: 300; text-align:center; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align:middle; } .greenline { color:#D5DDE5;; background:green; border-bottom:4px solid #9ea7af; font-size:14px; font-weight: 300; text-align:center; vertical-align:middle; } table tr:not(:nth-child(-n+2)) > td:first-child { font-weight: bold; text-align:center; }

This is what I want to achieve (a title every 5 rows): enter image description here

Improve this question
5
  • I believe this previous question should answer your own: stackoverflow.com/q/9830506/82548 (I'm not closing as dupe, yet, to give time for you to either clarify that it works, or explain why it doesn't). Commented Feb 25, 2015 at 23:25
  • The problem is with styling this and making the text vertical like in the image. Commented Feb 25, 2015 at 23:26
  • If that previous question is coupled with this one: stackoverflow.com/questions/6028128/how-do-i-rotate-text-in-css is your question answered? Commented Feb 25, 2015 at 23:28
  • I updated my code. I added a colspan but I don't know where to apply the rowspan. :/ My table is made row by row :/ Any ideas. Here is a live version: codepen.io/mariomez/pen/XJqwYy Commented Feb 25, 2015 at 23:55
  • I must be doing something wrong. I added the rowspan but the result is not right. Can you please help me? Commented Feb 26, 2015 at 0:10

1 Answer 1

Reset to default
3

You did it almost right, there were just needles cells left. But you need to adapt your CSS to handle the extra tds including the rowspan: Fiddle

HTML

.maintitle { background: #1b1e24; border-radius: 5px 5px 0px 0px; height: 40px; font-size: 20px; color: #FFF; font-weight: 300; text-align: center; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align: middle; } .greenline { color: #D5DDE5; ; background: green; border-bottom: 4px solid #9ea7af; font-size: 14px; font-weight: 300; text-align: center; vertical-align: middle; } table tr:not(:nth-child(-n+2))>td:first-child, table td[rowspan]+td { font-weight: bold; text-align: center; } table td[rowspan] { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); width: 1%; }
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="7" class="maintitle">title</td> </tr> <tr class="greenline"> <td>&nbsp;</td> <td>title</td> <td>title</td> <td>title</td> <td>title</td> <td>title</td> <td>title</td> </tr> <tr> <td rowspan="5">***title***</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> </tr> <tr> <td>2</td> <td>second</td> <td>third</td> <td>fourth</td> <td>first</td> <td>second</td> </tr> <tr> <td>3</td> <td>second</td> <td>third</td> <td>fourth</td> <td>first</td> <td>second</td> </tr> <tr> <td>4</td> <td>second</td> <td>third</td> <td>fourth</td> <td>first</td> <td>second</td> </tr> <tr> <td>5</td> <td>second</td> <td>third</td> <td>fourth</td> <td>first</td> <td>second</td> </tr> <tr> <td rowspan="5">***title***</td> <td>6</td> <td>second</td> <td>third</td> <td>fourth</td> <td>first</td> <td>second</td> </tr> <tr> <td>7</td> <td>second</td> <td>third</td> <td>fourth</td> <td>first</td> <td>second</td> </tr> <tr> <td>8</td> <td>second</td> <td>third</td> <td>fourth</td> <td>first</td> <td>second</td> </tr> <tr> <td>9</td> <td>second</td> <td>third</td> <td>fourth</td> <td>first</td> <td>second</td> </tr> <tr> <td>10</td> <td>second</td> <td>third</td> <td>fourth</td> <td>first</td> <td>second</td> </tr> </table>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.