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
Related
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 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 am making a website and I decided to fire up Internet Explorer to check out if everything works. To my surprise, it all pretty much does. That being said, a table that I have in place does not look right at all. This is the HTML of the table:
<div id="stats">
<center>
<table style="width:100%;">
<tr>
<td id="name">Health:</td>
<td class="border" id="color"><font color="#0451ff">380</font><font color="#e81123">(+75)</font></td>
<td id="name">Health per 5:</td>
<td id="color"><font color="#7fba00">4.85</font><font color="#e81123">(+0.5)</font></td>
</tr>
<tr>
<td id="name">Mana:</td>
<td class="border" id="color"><font color="#0451ff">250</font><font color="#7fba00">(+50)</font></td>
<td id="name">Mana per 5:</td>
<td id="color"><font color="#7fba00">7.1</font><font color="#7fba00">(+0.75)</font></td>
</tr>
<tr>
<td id="name">Attack Damage:</td>
<td class="border" id="color"><font color="#e81123">47</font><font color="#7fba00">(+3.2)</font></td>
<td id="name">Attack Speed:</td>
<td id="color"><font color="#e81123">0.604</font><font color="#7fba00">(+1.68)</font></td>
</tr>
<tr>
<td id="name">Armor:</td>
<td class="border" id="color"><font color="#e81123">15.5</font><font color="#7fba00">(+4)</font></td>
<td id="name">Magic Resistance:</td>
<td id="color"><font color="#0451ff">30</font><font color="#0451ff">(+0)</font></td>
</tr>
<tr>
<td id="name">Movement Speed:</td>
<td class="border" id="color"><font color="#e81123">335</font></td>
<td id="name">Range:</td>
<td id="color"><font color="#0451ff">550</font></td>
</tr>
</table>
</center>
</div>
and the CSS for stats is as follows:
#stats {
width:480px;
height:173px;
background:#09090A;
margin-left:auto;
margin-right:auto;
border:1px solid black;
padding:3px;
padding-bottom:5px;
}
#stats table tr #name {
width:35%;
height:20px;
text-align:center;
padding-left:4px;
}
#stats table tr #color {
color:#e97900;
padding-left:2px;
padding-right:2px;
}
#stats table tr .border {
border-right:1px solid black;
}
#stats table tr td {
width:13%;
text-align:center;
line-height:245%;
font-size:14px;
background-color:#1a1a1a;
}
#stats table tr {
border-bottom:1px solid black;
}
#stats table tr:last-child {
border-bottom:0;
}
In Chrome, Safari and Firefox, the tables look like this:
which is what I want; everything across on one line nice and neat. But on Internet Explorer all of the tables look like this:
is there a way to force the table to format correctly in Internet Explorer?
with your updated css, I was able to replicate and this fixes the problem
#stats table tr td {
width:13%;
text-align:center;
line-height:245%;
font-size:14px;
background-color:#1a1a1a;
white-space:nowrap;
}
in your CSS?
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>
I want to add a ::before selector on some table cells what has a position:absolute , but it fails:
table{ border:1px solid #ccc; padding:10px; }
table td{ border:1px solid #ccc; padding:5px; }
.useBefore::before{
content:'before';
position:absolute;
}
<table>
<tbody>
<tr>
<td>bird</td>
<td>animal</td>
<td>nature</td>
</tr>
<tr class='useBefore'>
<td>building</td>
<td>robot</td>
<td>city</td>
</tr>
</tbody>
</table>
I noticed that if I add the ::before to all of the tr's then it works:
table{
border:1px solid #ccc;
padding:10px;
}
table td{
border:1px solid #ccc;
padding:5px;
}
tr::before{
content:'before';
position:absolute;
}
<table>
<tbody>
<tr>
<td>bird</td>
<td>animal</td>
<td>nature</td>
</tr>
<tr class='useBefore'>
<td>building</td>
<td>robot</td>
<td>city</td>
</tr>
</tbody>
</table>
But this is not what I want, because I want to add it only on some of them.
I'm not sure why it fails exactly, but you could add it on the first table cell instead.
.useBefore td:first-child:before{
content:'before';
position:absolute;
}