How to make Vertical text on table with fixed and long text with bootstrap ?
I have problem with vertical text on table with bootstrap.
I want to know why my code doesn't work and whats is the correct method to make it work.
Here my table looks like
Here my HTML Code :
<table class="table table-bordered table-hover table-condensed" align="center">
<thead>
<tr>
<th style="border-bottom-color:#FFFFFF" > </th>
<th style="border-bottom-color:#FFFFFF">
</th>
<th colspan="12" align="center">
<center> VALIDASI </center>
</th>
<th style="border-bottom-color:#FFFFFF"><center></center></th>
<th colspan="6" align="center">
<center>JUMLAH RECORD</center> </th>
</tr>
<tr align="center">
<th style="border-bottom-color:#FFFFFF">NO.</th>
<th style="border-bottom-color:#FFFFFF" >PROGRAM STUDI</th>
<th class="vertical" rowspan="2"><div class="vertical">IDENTITAS MAHASISWA</div></th>
<th rowspan="2"><center>%</center></th>
<th rowspan="2"><center>MAHASISWA PT</center></th>
<th rowspan="2"><center>%</center></th>
<th rowspan="2"><center>KURIKULUM</center></th>
<th rowspan="2"><center>%</center></th>
<th rowspan="2"><center>NILAI</center></th>
<th rowspan="2"><center>%</center></th>
<th rowspan="2"><center>AKM</center></th>
<th rowspan="2"><center>%</center></th>
<th rowspan="2"><center>DAYA TAMPUNG</center></th>
<th rowspan="2"><center>%</center></th>
<th style="border-bottom-color:#FFFFFF">LAPORAN</th>
<th colspan="3" align="center"><center>MHS</center></th>
<th style="border-bottom-color:#FFFFFF"><center>
KELAS
</center></th>
<th rowspan="2"><center>NILAI</center></th>
<th rowspan="2"><center>AKM</center></th>
</tr>
<tr align="center">
<th > </th>
<th > </th>
<th ><center>%</center></th>
<th ><center>A</center></th>
<th ><center>C</center></th>
<th ><center>N</center></th>
<th ><center>KULIAH</center></th>
</tr>
</thead>
and this is CSS Code that I am using
div.vertical
{
margin-left: -85px;
position: absolute;
width: auto;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg); /* Safari/Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-ms-transform: rotate(-90deg); /* IE 9 */
}
th.vertical
{
height: 150px;
line-height: 14px;
padding-bottom: 20px;
text-align: left;
}
table {
border:1px solid black;
}
table th {
border-bottom:1px solid black;
}
th.rotate {
height:80px;
white-space: nowrap;
position:relative;
}
th.rotate > div {
transform: rotate(90deg);
position:absolute;
left:0;
right:0;
top: 10px;
margin:auto;
}
<table>
<tr>
<th class="rotate">
<div><span>Column 1</span></div>
</th>
<th class="rotate">
<div><span>Column 2</span></div>
</th>
<th class="rotate">
<div><span>Column 3</span></div>
</th>
</tr>
<tr>
<td>col</td>
<td>col</td>
<td>col</td>
</tr>
</table>
Have a look at the following JSFiddle
https://jsfiddle.net/a9vc12ve/1/
Using CSS white-space Property
white-space: nowrap;
Related
I am trying to implement cellpadding and cellspacing in my forum, but I just can't get the width="100%" to work with it.
Is it possible to set a width while using cellpadding or cellspacing in my CSS?
.categories div.category td tr{
padding: 80px;
width: 500px;
}
echo '
<table class="categories">
<caption>Category: ', $row2['category'], '</caption>
<thead>
<tr>
<td colspan="3">
<th colspan="3"><a href="create_music_sub.php?cat='.$row2['id'].'&admin='.$row2['admin'].'">
Click here to Create Sub Category
</a></th>
</td>
</tr><tr>
<div class="category"><th scope="col">Category</th></div>
<th scope="col">Creator</th>
<th scope="col">Date Created</th>
</tr>
</thead><tbody>';
If what you meant is to set the table's width to 100%, this works.
And as for the code you provided there were mistakes:
When you want to use a th you don't use a td with it.
The div.category should be inside the tr > th not wrapping it.
When you're posting a question please remove the php fragments and provide a working fiddle for us to be able to help you faster.
Please look at the code to see what I did differently. I think the problem was in your html
table{
border:1px solid black;
width: 100%;
}
tr, th, td{
border:1px solid black;
}
td,th{
padding: 10px;
}
/*If you want the last column to be smaller you can change one of them to a certain width*/
.creator{
width:20%;
}
<table class="categories">
<caption>Category: 1</caption>
<thead>
<tr>
<th colspan="3">
Click here to Create Sub Category
</th>
</tr>
<tr>
<th scope="col">
<div class="category">Category</div>
</th>
<th scope="col">Creator</th>
<th scope="col">Date Created</th>
</tr>
<tr>
<th colspan="2" scope="col">
<div class="category">Category</div>
</th>
<th scope="col">Creator</th>
</tr>
</thead>
</table>
<table class="categories">
<caption>Category: 1</caption>
<thead>
<tr>
<th colspan="3">
Click here to Create Sub Category
</th>
</tr>
<tr>
<th scope="col">
<div class="category">Category</div>
</th>
<th scope="col">Creator</th>
<th scope="col">Date Created</th>
</tr>
<tr>
<th colspan="2" scope="col">
<div class="category">Category</div>
</th>
<th scope="col" class="creator">Creator</th>
</tr>
</thead>
</table>
enter image description herein html i tried lots of th and text-align methods but i m not getting the expected results
I want my heading tag to be displayed like the image
table#tbl {
valign : top;
table-layout:fixed;
word-wrap : break-word;
text-align:right;
}
<table border="2px" style="width:100%;margin-top:8px;" id="tbl">
<tr>
<th width="3%">Sr no.</th>
<th style="text-align:left" width="25%" >Item</th>
<th width="15%">HSN</th>
<th width="5%">Qty</th>
<th width="10%">Rate/ Item</th>
<th width="10%">Discount/ Item</th>
<th width="10%">Taxable Value</th>
<th width="8%">SGST</th>
<th width="8%">CGST</th>
<th width="12%">Total</th>
</tr>
table#tbl {
valign : top;
table-layout:fixed;
word-wrap : break-word;
text-align:right;
}
You need to set the vertical-align on the th elements. You can do that using the descendent selector like this:
table#tbl th {
vertical-align: top;
}
table#tbl{
table-layout: fixed;
word-wrap: break-word;
text-align: right;
}
table#tbl th {
vertical-align: top;
}
<table border="2px" style="width:100%;margin-top:8px;" id="tbl">
<tr>
<th width="3%">Sr no.</th>
<th style="text-align:left" width="25%">Item</th>
<th width="15%">HSN</th>
<th width="5%">Qty</th>
<th width="10%">Rate/ Item</th>
<th width="10%">Discount/ Item</th>
<th width="10%">Taxable Value</th>
<th width="8%">SGST</th>
<th width="8%">CGST</th>
<th width="12%">Total</th>
</tr>
</table>
I have fixed first 2 columns of table but it is showing one extra row in table header.
.headcol {
position:absolute;
width:7em;
top:auto;
left: 0px;
}
.headcol2 {
position:absolute;
width:15em;
top:auto;
left: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered table-striped" style="margin-le
<table class="table table-bordered table-striped" style="margin-left: 227px;display: block;height:400px;">
<thead>
<tr>
<th rowspan="2" class="headcol">Membership No</th>
<th class="headcol2" rowspan="2">Name</th>
<th rowspan="2">Sallery No</th>
<th rowspan="2">MBS</th>
<th rowspan="2">Shares</th>
<th rowspan="2">CD</th>
<th rowspan="2">RD</th>
<th colspan="2">speciak</th>
<th colspan="2">speciah</th>
<th colspan="2">speciag</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
</tr>
</thead>
</table>
In this it has fixed first 2 columns but the first interest is show on the empty row.Please help.You can see my design at below :
https://jsfiddle.net/rahulpamnani/nnukubyu/1/
You have to remove the position: absolute
like so:
.headcol {
width:7em;
top:auto;
left: 0px;
}
.headcol2 {
width:15em;
top:auto;
left: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered table-striped" style="margin-le
<table class="table table-bordered table-striped" style="margin-left: 227px;display: block;height:400px;">
<thead>
<tr>
<th rowspan="2" class="headcol">Membership No</th>
<th class="headcol2" rowspan="2">Name</th>
<th rowspan="2">Sallery No</th>
<th rowspan="2">MBS</th>
<th rowspan="2">Shares</th>
<th rowspan="2">CD</th>
<th rowspan="2">RD</th>
<th colspan="2">speciak</th>
<th colspan="2">speciah</th>
<th colspan="2">speciag</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
</tr>
</thead>
</table>
Hope this helps
Remove absolute position so that the second heading does not overlap
If this is what you wanted and i understood the question
.headcol {
width:7em;
top:auto;
left: 0px;
}
.headcol2 {
width:15em;
top:auto;
left: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered table-striped" style="margin-left: 227px;display: block;height:400px;">
<thead>
<tr>
<th rowspan="2" class="headcol">Membership No</th>
<th class="headcol2" rowspan="2">Name</th>
<th rowspan="2">Sallery No</th>
<th rowspan="2">MBS</th>
<th rowspan="2">Shares</th>
<th rowspan="2">CD</th>
<th rowspan="2">RD</th>
<th colspan="2">speciak</th>
<th colspan="2">speciah</th>
<th colspan="2">speciag</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
</tr>
</thead>
</table>
.headcol
{
position:absolute;
width:7em;
top:auto;
left: 0px;
}
.headcol2
{
position:absolute;
width:15em;
top:auto;
left: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered table-striped" style="margin-le
<table class="table table-bordered table-striped" style="margin-left: 227px;display: block;height:400px;">
<thead>
<tr>
<th rowspan="2" class="headcol">Membership No</th>
<th class="headcol2" rowspan="2">Name</th>
<th rowspan="2">Sallery No</th>
<th rowspan="2">MBS</th>
<th rowspan="2">Shares</th>
<th rowspan="2">CD</th>
<th rowspan="2">RD</th>
<th colspan="2">speciak</th>
<th colspan="2">speciah</th>
<th colspan="2">speciag</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th></th>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
</tr>
Just Create an extra column in second row.I want first 2 columns of table to fixed when any scroll the table horizontally.
ok, i've been trying hours to make my HTML code working for rotating text on my table, but doesnt seem to work.
here is jsfiddle, if anyone is willing to help me, I will appreciate that
https://jsfiddle.net/zmxr9kyh/
here my html code
$(function() {
var header_height = 0;
$('table th span').each(function() {
if ($(this).outerWidth() > header_height) header_height = $(this).outerWidth();
});
$('table th').height(header_height);
});
th {
position: relative;
padding: 10px;
}
th span {
bottom: 0;
display: inline-table;
left: 50%;
position: absolute;
transform: rotate(-90deg);
transform-origin: 0 50% 0;
white-space: pre;
width: 100;
margin-left: auto;
margin-bottom: -110;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover table-condensed" align="center" border='1'>
<thead>
<tr>
<th style="border-bottom-color:#FFFFFF"> </th>
<th style="border-bottom-color:#FFFFFF">
</th>
<th colspan="12" align="center">
<center>VALIDASI</center>
</th>
<th style="border-bottom-color:#FFFFFF">
<center></center>
</th>
<th colspan="6" align="center">
<center>JUMLAH RECORD</center>
</th>
</tr>
<tr align="center">
<th style="border-bottom-color:#FFFFFF">NO.</th>
<th style="border-bottom-color:#FFFFFF">PROGRAM STUDI</th>
<th rowspan="2"><span>IDENTITAS MAHASISWA</span>
</th>
<th rowspan="2">
<center>%</center>
</th>
<th rowspan="2"><span>MAHASISWA PT</span>
</th>
<th rowspan="2">
<center>%</center>
</th>
<th rowspan="2"><span>KURIKULUM</span>
</th>
<th rowspan="2">
<center>%</center>
</th>
<th rowspan="2"><span>NILAI</span>
</th>
<th rowspan="2">
<center>%</center>
</th>
<th rowspan="2"><span>AKM</span>
</th>
<th rowspan="2">
<center>%</center>
</th>
<th rowspan="2"><span>DAYA TAMPUNG</span>
</th>
<th rowspan="2">
<center>%</center>
</th>
<th style="border-bottom-color:#FFFFFF"><span>LAPORAN %</span>
</th>
<th colspan="3" align="center">
<center>MHS</center>
</th>
<th style="border-bottom-color:#FFFFFF">
<center>
KELAS KKULIAH
</center>
</th>
<th rowspan="2">
<center>NILAI</center>
</th>
<th rowspan="2">
<center>AKM</center>
</th>
</tr>
<tr align="center">
<th> </th>
<th> </th>
<th>
<center></center>
</th>
<th>
<center>A</center>
</th>
<th>
<center>C</center>
</th>
<th>
<center>N</center>
</th>
<th>
<center></center>
</th>
</tr>
</thead>
</table>
writing-mode is your friend:
th span {
writing-mode: tb-rl;
}
You might have to add vendor prefixes.
Updated JSFiddle
More information
Browser support of writing-mode
I am using the following code to position table . It displays well in firefox and chrome but the table gets stick on the left edge of the internet explorer 9 but it should be on the right . Can someone suggest some modifications to this code to display it properly in internet explorer ?
Html code :
<table class="tab1">
<thead>
<tr>
<th scope="col" id="Dimension"><strong>DIMENSIONS</strong></th>
<th scope="col" id="Feet"><strong>FEET</strong></th>
</tr>
</thead>
</tbody>
<tr class="disp-Sing-Spc
">
<th class="color1" scope="col">A (Distance Between Signs)</th>
<th class="color1" scope="col" id="A">100</th>
</tr>
<tr class="disp-Sing-Spc
">
<th class="color2" scope="col">B (Distance Between Signs)</th>
<th class="color2" scope="col" id="B">100</th>
</tr>
<tr class="disp-Sing-Spc
">
<th class="color1" scope="col">C (Distance Between Signs)</th>
<th class="color1" scope="col" id="C">100</th>
</tr>
<tr id="disp-Tpr-Len">
<th class="color2" scope="col">L (Taper Length)</th>
<th class="color2" scope="col" id="Tpr-Len">None</th>
</tr>
<tr class="disp-cn-spc
">
<th class="color1" scope="col">Maximum Taper Channelizing Device Spacing</th>
<th class="color1" scope="col" id="max-taper-dv-spcing">None</th>
</tr>
<tr class="disp-cn-spc
">
<th class="color2" scope="col">Suggested Taper Channelizing Device Spacing</th>
<th class="color2" scope="col" id="Sugg-tpr-dev-spcing">None</th>
</tr>
<tr class="disp-cn-spc
">
<th class="color1" scope="col">Maximum Tangent Channelizing Device Spacing</th>
<th class="color1" scope="col" id="Max-Tgt-dev-Spcing">None</th>
</tr>
<tr class="disp-cn-spc
">
<th class="color2" scope="col">Suggested Tangent Channelizing Device Spacing</th>
<th class="color2" scope="col" id="Sugg-Tgt-dev-Spcing">None</th>
</tr>
<tr>
</tbody>
</table>
CSS Code :
.tab1{
border-collapse: collapse;
position: absolute;
right: 2%;
top: 95px;
width: 25%;
background: #EA9949;
}
In my IE9 it looks fine, however without the 2% right margin. You should try to float your div and use fixed values.
.tab1{
border-collapse: collapse;
position: absolute;
right: 30px;
float:right;
top: 95px;
width: 300px;
background: #EA9949;
}
By the way, you should get read of the tables and use divs instead.