How do I vertically center a div that is inside a table cell?
HTML:
<tr class="rowClass">
<td class="cellClass">
<div class="divClass">Stuff</div>
</td>
</tr>
CSS:
.rowClass {
vertical-align:middle !important;
height:90px;
}
.cellClass {
vertical-align:middle !important;
height:90px;
}
.divClass {
vertical-align:middle !important;
height:90px;
}
I know the class definitions are redundant, but I've been trying lots of different things. Why isn't the solution (whatever it is) intuitive. None of the "obvious" solutions that I tried would work.
There is no need to defineheight in .divClass . write like this:
.cellClass {
vertical-align:middle;
height:90px;
border:1px solid red;
}
Check this http://jsfiddle.net/ncrKH/
.divClass {
margin-top:auto;
}
HTML
<table border=1>
<tr class="rowClass">
<td class="cellClass">
<div class="divClass">Stuff</div>
</td>
</tr>
</table>
CSS
.rowClass {
vertical-align:middle !important;
height:90px;
}
.cellClass {
vertical-align:middle !important;
height:90px;
}
.divClass {
margin-top:auto;
}
Live Example
With out any css itself you can do this with valign="middle" try this code.
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th height="550" align="center" valign="middle" scope="col">
<div>Hello</div>
</th>
</tr>
</table>
Related
I'm trying to build the following table below. Having trouble building out the center ... divider between the key and the value. It should grow/shrink based on the column width. Any ideas on how I might achieve this with css?
Maybe it is possible to work with a table:
<table class="tab">
<tr>
<td class="wordsleft">First Name:</td>
<td class="distance"></td>
<td class="wordsright">Guy</td></tr>
<tr>
<td class="wordsleft">Last Name:</td>
<td></td>
<td class="wordsright">Bronson</td></tr>
</table>
and the CSS:
.tab {
border-collapse:collapse;
}
.tab tr {
border-bottom:2px dotted black;
}
.tab .distance {
width:50px;
}
.tab .wordsleft {
border-bottom-style:none;
text-align:left;
}
.tab .wordsright{
border-bottom-style:none;
text-align:right;
}
I hope it works
I want to add a scroll bar when the html table body overflows.I do not want to scroll the table header. I have these html and css codes in my oracle apex page
HTML
<div class="t-Report-wrap">
<div class="t-Report-tableWrap">
<table class="t-Report-report" summary="tab">
<thead>
<tr>
<th class="t-Report-colHead" id="CODE" align="center">Code</th>
<th class="t-Report-colHead" id="HEAD" align="center">Head</th>
</tr>
</thead>
<tbody>
<tr> <td > 5198 </td><td >SUSPENCE </td></tr>
<tr> <td > 1308 </td><td >SHARE IN KNR</td></tr>
<tr> <td > 4803 </td><td >ONE TIME </td></tr>
<tr><td >6021</td><td >NEETHI GOODS </td></tr>
<tr><td >6022</td><td >MANNURE STOCK </td></tr>
<tr><td >4832</td><td >DONATION TO </td></tr>
<tr><td >5218</td><td >CALANDER </td></tr>
<tr><td >4829</td><td >BUILDING TAX </td></tr>
<tr><td >5199</td><td >BICYCLE ADVANCE </td></tr>
<tr><td >2509</td><td >BANK LOAN LT MI(SPL) </td></tr>
</tbody>
</table>
</div>
<div class="t-Report-links"></div>
<table class="t-Report-pagination t-Report-pagination--bottom" role="presentation"></table>
</div>
CSS
.t-Report-wrap {
position: relative;
}
.t-Report-tableWrap {
height:180px;
overflow:auto;
margin-top:20px;
}
.t-Report-tableWrap table {
width:100%;
}
.t-Report-tableWrap table thead th .t-Report-colHead {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}
But with this code, the table header is also scrolling. This was referenced from SO answer How to display scroll bar onto a html table. Can anybody help me to find out the error in this code?
Update your th HTML to include a span:
<th id="CODE" align="center"><span class="t-Report-colHead">Code</span></th>
And edit your CSS selectors to remove the repetitive th:
.t-Report-tableWrap table thead .t-Report-colHead
Your code is incorrect as you added an extra space between th and .t-Report-colHead in .t-Report-tableWrap table thead th .t-Report-colHead {
However, here is a working code.
tr{
display: table;
width: 100%;
table-layout: fixed;
}
thead{
display: block;
}
tbody{
display: block;
height: 180px;
overflow: auto;
}
CODEPEN
Hope this helps.
Set height and add overflow:auto; to .t-Report-tableWrap tbody instead of .t-Report-tableWrap so that the scrolling will only effect table body.
.t-Report-wrap {
position: relative;
}
.t-Report-tableWrap {
margin-top:20px;
}
.t-Report-tableWrap table {
width:100%;
}
.t-Report-tableWrap table thead th .t-Report-colHead {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}
.t-Report-tableWrap tbody{
height:180px;
overflow:auto;
}
Hope this helps.
Change css code
tbody {
display:block;
height:200px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
t-Report-report {
width:400px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="t-Report-wrap">
<div class="t-Report-tableWrap">
<table class="t-Report-report" summary="tab">
<thead>
<tr>
<th align="center" class="t-Report-colHead" id="CODE">Code</th>
<th align="center" class="t-Report-colHead" id="HEAD">Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>5198</td>
<td>SUSPENCE</td>
</tr>
<tr>
<td>1308</td>
<td>SHARE IN KNR</td>
</tr>
<tr>
<td>4803</td>
<td>ONE TIME</td>
</tr>
<tr>
<td>6021</td>
<td>NEETHI GOODS</td>
</tr>
<tr>
<td>6022</td>
<td>MANNURE STOCK</td>
</tr>
<tr>
<td>4832</td>
<td>DONATION TO</td>
</tr>
<tr>
<td>5218</td>
<td>CALANDER</td>
</tr>
<tr>
<td>4829</td>
<td>BUILDING TAX</td>
</tr>
<tr>
<td>5199</td>
<td>BICYCLE ADVANCE</td>
</tr>
<tr>
<td>2509</td>
<td>BANK LOAN LT MI(SPL)</td>
</tr>
</tbody>
</table>
</div>
<div class="t-Report-links"></div>
<table class="t-Report-pagination t-Report-pagination--bottom" role="presentation"></table>
</div>
</body>
</html>
I think apex has a setup for this, see this example:
Without the setting:
https://apex.oracle.com/pls/apex/f?p=145797:1
With the setting:
https://apex.oracle.com/pls/apex/f?p=145797:12
Go to Report Attributes:
I've read a lot of questions about this problem, but none of those could solve it perfectly: the cell won't be clickable at its full height.
As shown in the picture, I made a headline for my webpage using the <table> tag and colored the clickable content into blue, while the whole table is orange.
The HTML code is:
<table class="visible" id="menu" align="center">
<tr>
<td><p>Home</p></td>
...
</tr>
</table>
And the CSS code is:
#menu a {
display: block;
text-decoration: none;
}
Unfortunately, as you can see, not the whole cell is blue, therefore not the whole cell is clickable. Could anyone tell me a perfect solution for this (possibly without using JavaScript)?
Try display: flex and justify-content: center instead of display: block.
a {
background: lightblue;
display: flex;
justify-content: center;
text-decoration: none;
}
<table align="center" border="1">
<tr>
<td><p>Home</p></td>
</tr>
</table>
Do not use <p/> (block-level) inside <a/> (inline-level).
a::after {
display:block;
content:" ";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:yellow;
z-index:-1;
}
td
{
position:relative;
z-index:0;
}
delete styles for "a".
https://jsfiddle.net/1nrbL1mu/9/
This also works for IE:
a::after
{
display:block;
content:" ";
position:absolute;
top:0;
left:0;
width:100%;
height:300px; /* max possible */
background:yellow;
z-index:-1;
}
td
{
position:relative;
z-index:0;
overflow:hidden;
}
https://jsfiddle.net/1nrbL1mu/12/
Try puting it o new table of one column and one row
<table align="center" width="175" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <a href="#" title="Conoce más" style="text-decoration: none; color: #010000;" target="_blank">
<table align="center" width="175" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border: 1px solid #f3b946; text-align: center; padding: 10px 35px 10px 35px; font-size: 18px;">CONOCE MÁS
</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
I have a table in html.
The content of this table is text and an image. I would align the text in the top-left corner and the image in the middle (vertical-align).
I tried in this way:
CSS:
table td {border-collapse: collapse;}
#tabella {border: 1px solid black; text-align: left; vertical-align: top;}
#variante {vertical-align: middle;}
HTML:
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text
<br>
<img id="variante" width="75" border="0" src="www.favetta.com/image.png">
</td>
But in this way I obtain all (text and image) aligned in the top-left corner of the cell.
Any suggestion?
Are you doing this for an email? If so inline styling is fine (although won't work in all email clients so have a default.
If email do something like...
<table>
<tr>
<td align="center">
<table width="100%">
<tr>
<td align="left">This is text</td>
</tr>
</table>
<br/><br/>
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
<br/><br/><br/><br/>
</td>
</tr>
<table>
It looks crude but some browsers and email clients will ignore 'height='. This is purely what Ive found from years of email templating.
If not email, try and avoid tables - but if you can't then try something like...
<table>
<tr>
<td class="content">
This is text
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
</td>
</tr>
<table>
css
table{
border:1px solid grey;
width:100%;
}
.content{
text-align:left;
}
.content img{
width:75px;
vertical-align:middle;
transform: translate(-50%, -50%);
margin: 100px 50% 50px 50%;
}
https://jsfiddle.net/qbss1f0t/
Here is a simple example:
table{
border:1px solid #000;
}
table tr{
height:200px;
}
table td{
width:200px;
text-align:center;
}
.textNode{
text-align:left;
padding:0;
margin:0;
vertical-align:top;
}
.imgNode img{
width:75px;
margin: auto;
}
<table>
<tr>
<td class="textNode">This is text</td>
<td class="imgNode"><img src="http://s27.postimg.org/fs9k8zewj/cow1.png"></td>
</tr>
<table>
Here is a fiddle
This should get you to where you want.
Side Note: inline styling is not a good practice.
Use this may help you
<table width="100%">
<tr>
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text</td>
<td><img id="variante" width="75" border="0" src="www.favetta.com/image.png"></td>
</tr>
<table>
I have a table here: Table
As you can see the table row is longer than the table headings. I have got a fixed table headings using one table and just including th tags and then I create a second table for td tags an combine together.
My question is how do I get the table heading to be the same width as the table row and then be able to clip the scroll bar on the side next to the table row?
Below is html:
<table id="qandatbl" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 1205px;">
<thead>
<tr>
<th width="2%"></th>
<th class="qid" width="5%">Num</th>
<th class="question" width="13%">Question</th>
<th class="optandans" width="16%">Option and Answer</th>
<th class="noofreplies" width="7%">Number of Replies</th>
<th class="weight" width="6%">Number of Marks</th>
<th class="image" width="17%">Image</th>
<th class="video" width="17%">Video</th>
<th class="audio" width="17%">Audio</th>
</tr>
</thead>
</table>
<div id="qandatbl_onthefly_container" style="width: 1221px;">
<table id="qandatbl_onthefly" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr class="optionAndAnswer" align="center">
<td class="plusrow" width="2%">1</td>
<td class="qid" width="5%">2</td>
<td class="question" width="13%">3</td>
<td class="extratd" width="16%">4</td>
<td class="noofreplies" width="7%">5</td>
<td class="weight" width="6%">6</td>
<td class="image" width="17%">7</td>
<td class="video" width="17%">8</td>
<td class="audio" width="17%">9</td>
</tr>
</tbody>
</table>
</div>
Below is CSS:
#qandatbl_onthefly_container
{
width:100%;
overflow-y: scroll;
overflow-x: hidden;
max-height:500px;
}
#qandatbl_onthefly
{
width:100%;
clear:both;
overflow:auto;
}
#qandatbl, #qandatbl_onthefly{
border:1px black solid;
border-collapse:collapse;
table-layout:fixed;
}
#qandatbl{
width:100%;
margin-left:0;
clear:both;
}
#qandatbl td {
vertical-align: middle;
}
#qandatbl th{
border:1px black solid;
border-collapse:collapse;
text-align:center;
}
UPDATE:
#qandatbl_onthefly_container
{
overflow-y: scroll;
overflow-x: hidden;
max-height:500px;
}
#qandatbl_onthefly
{
clear:both;
overflow:auto;
}
#qandatbl, #qandatbl_onthefly{
border:1px black solid;
border-collapse:collapse;
table-layout:fixed;
width:100%;
margin-left:0;
clear:both;
}
#qandatbl td {
vertical-align: middle;
}
#qandatbl th{
border:1px black solid;
border-collapse:collapse;
text-align:center;
}
#qandatbl_onthefly td{
border:1px black solid;
border-collapse:collapse;
}
OUTPUT AT MOMENT:
You are in 2 diferrent tables.
Headers are in:
table id="qandatbl" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 1205px;"
Body is in:
table id="qandatbl_onthefly" cellspacing="0" cellpadding="0" border="0" align="center"
If you really want to have two different tables you have to make th and td the same width in CSS. I would suggest to make thead and tbody to that what your two tables are currently.
thead id="qandatbl"
tbody id="qandatbl_onthefly"
(OT: And can somebody please tell me how to format HTML tags at SO ?)