CODEWITHSUNDEEP
javascriptpythonhtmlcss
Ankur Agarwal
Ankur Agarwal

Reputation: 24768

Displaying table header content vertically

I have this 

header1 header2

 data1  data2

But I want to display it as 

h       h
e       e 
a       a 
d       d
e       e 
r       r
1       2

data1   data2

I also want borders around the headers and table rows.

EDIT:

Based on Vinc199789's answer below I came up with this.

 <table>
  <tr style="border 1px solid;text-align:center;">
     <th style="width:1px;word-break:break-all;border:1px solid;text-align:center;"><div style="width:1px;word-break:break-all;text-align:center;">Jill</div></th>
     <th style="width:1px;word-break:break-all;border: 1px solid;"><div style="width:1px;word-break:break-all;">Smith</div></th>
     <th style="width:1px;word-break:break-all;border: 1px solid;"><div style="width:1px;word-break:break-all;">50</div></th>
  </tr>
  <tr>
    <td style="border: 1px solid;">Eve</td>
    <td style="border: 1px solid;">Jackson</td>
    <td style="border: 1px solid;">94</td>
  </tr>
</table>

However I need the following improvements on this:

  1. If you see the output, there is a gap above J in "Jill" , "Smith" occupies the entire vertical space and "50" is in the middle. Is there a way to make all the headers start from the ceiling of the vertical space?

  2. I also wanted a way to center align "Jill", "Smith" and "50". text-align:center is not working.

Upvotes: 0

Views: 63

Answers (1)

Vinc199789
Vinc199789

Reputation: 1046

You can use css word-break: break-all

What I did is I added a div inside a td and set the width to 1px (this to make sure that there can not be two letters placed next to each other). I also added word-break: break-all and you can see the result in the code snippet or is this fiddle.

edit With margin-left:auto and margin-right:auto I center the vertical headers and with text-align:center I center the other table content.

If you add vertical-align:top to the td you also have your headers placed at the top

updated fiddle

td > div{
  width:1px;
  word-break: break-all;
  margin-right:auto;
  margin-left:auto;
}
td{
  text-align:center;
  vertical-align:top;
}
 <table style="width:100%">
  <tr>
     <td><div>Jill</div></td>
     <td><div>Smith</div></td>
     <td><div>50</div></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Upvotes: 3

Related Questions