0

I am generating a reports for NGO which do surveys of school I have generated reports than they have sent there format. It can be done easily via simple table structure but I want to do it through Bootstrap classes for table. Especially the vertical alignment of the text in reports.

I have search around for vertical columns and design etc. but I didn't found some, please help me out. What I need is to show proj# proj code proj name proj goal column in center and in vertical like the image given below .

here what I need to develop.enter image description here

And here what I have made for them : enter image description here

Michel
  • 490
  • 4
  • 11
Vicky
  • 982
  • 2
  • 11
  • 28

1 Answers1

1

i think table layout will be very much suited for this purpose. While if you're moving from table layout then i would recommend for loop or while in your code. Prepare an array or mysql table and call values through database. You will be better off maintaining table in databases rather than bootstrap or table classes. Still i feel you should keep table layout, it is flexible. Try this site for tutorial

For transformation of word, you can use transform: rotate(90 deg); in css

.vertical-text {
    transform: rotate(-90deg);
    transform-origin: left center 0;
padding-top:50px;
}

<td rowspan="2">

Replace the value of rowspan with row count from database.The table will look just as in paper with column correctly merged.

More about rowspan

Check this fiddle

Community
  • 1
  • 1
Sachin Kanungo
  • 1,054
  • 9
  • 17
  • well i am dynamically rendring the table data coming from database and i am using foreach loop to display all data all is set except the format of report they want me to generate this kind of report i am talking about the first image – Vicky Sep 12 '15 at 14:48
  • `rowspan=array.length - 1` this is the way to go. In your CAI td put row span and provide array length as output.http://reference.sitepoint.com/html/th/rowspan – Sachin Kanungo Sep 12 '15 at 14:53
  • Although rowspan worked fine but it create another problem which is it disturb other column in bootstrap table – Vicky Sep 12 '15 at 18:29
  • that's why i fly away from using frameworks for css. I use my own created little foundation css. Minimum headache for !important and less padding margin confusions due to border-box and clearfix. – Sachin Kanungo Sep 12 '15 at 18:50
  • yeah great buddy i just fiqured out i have to count my array and put that array in `rowspan= $myarrsize; ?>` and it will fit automatically in table you help me alot and learned a good thing today – Vicky Sep 12 '15 at 19:09