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?
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 am trying to get my right border to go straight down the table column as in the image below:
Mine looks like this:
If you look closely the line does not go all the way down to the bottom and it looks scattered towards the bottom.
Here is my html:
<div class="Popular">
<table>
<tr>
<td class="column2"><img src="assets/large_acb8138a-77ea-40fe-96fd-237156495af3.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_670662b7-080f-41a4-934b-2c0bc6a821a6.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_d173fb5e-b78b-4aa5-a481-6b744ad8e041.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_bd6e7f09-f4fe-44f9-96c9-fab317f09644.jpg" width="230px" height="200px"></td>
<td class="column2"><img src="assets/large_34952e34-5414-456c-8b8f-b469f55b4fdc.jpg" width="230px" height="200px"></td>
<td class="column2"><img src="assets/large_97c737b9-1e44-41c4-9c47-c92b7ddd2455.jpg" width="233px" height="200px"></td>
</tr>
<tr>
<td><h4>$0.45</h4></td>
<td><h4>$2.59</h4></td>
<td><h4>$1.90</h4></td>
<td><h4>$2.59lb</h4></td>
<td><h4>$6.29</h4></td>
<td><h4>$0.99</h4></td>
</tr>
<tr>
<td>Banana</td>
<td>Avocado</td>
<td>Full Apple</td>
<td>Yellow Onion</td>
<td>Strawberries</td>
<td>Large Lemon</td>
</tr>
<tr>
<td>-0.41lbs</td>
<td>each</td>
<td>-0.5lbs</td>
<td>n/a</td>
<td>16Oz</td>
<td>each</td>
</tr>
</table>
</div>
Here is my CSS:
.Popular{
background:white;
height:350px;
width:80%;
margin:0 0 0 100px;
}
.Popular td{
border-right:1px solid gray;
}
.Popular ul{
margin:0;
}
.Popular li{
list-style:none;
}
.Popular h4{
margin:0;
}
.column2{
border-right:1px solid gray;
padding:5px 10px;
}
UPDATE 1
I added the border colapse property and it did get rid of the spacing, however, the line is still not going all the way to the bottom see image below:
UPDATE 2
With help it looks like the image below (see the first row not the second row). The words are more spread out from eachother and the spacing on the bottom is gone as it supposed to look like in the first image.
See my code below - I've added comments to the CSS.
.Popular {
width: 80%;
margin-left: 100px;
overflow: auto;
}
/* Collapse the border, to prevent gaps between the table rows/cells */
.Popular table {
border-collapse: collapse;
}
/* Add 1 em padding to left/right of all cells (of all rows after the first, to not mess with the images) */
.Popular tr + tr td {
padding: 0 1em;
}
/* Add 3em of padding to the bottom of all table cells, in the last table row; this replaces setting a height on the parent container - to simulate height */
.Popular tr:last-child td {
padding-bottom: 3em;
}
.Popular td {
margin: 0;
border-right: 1px solid gray;
}
.Popular ul {
margin:0;
}
.Popular li {
list-style:none;
}
.Popular h4 {
margin:0;
}
.column2 {
border-right:1px solid gray;
padding:5px 10px;
}
<div class="Popular">
<table>
<tr>
<td class="column2"><img src="assets/large_acb8138a-77ea-40fe-96fd-237156495af3.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_670662b7-080f-41a4-934b-2c0bc6a821a6.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_d173fb5e-b78b-4aa5-a481-6b744ad8e041.jpg" width="235px" height="200px"></td>
<td class="column2"><img src="assets/large_bd6e7f09-f4fe-44f9-96c9-fab317f09644.jpg" width="230px" height="200px"></td>
<td class="column2"><img src="assets/large_34952e34-5414-456c-8b8f-b469f55b4fdc.jpg" width="230px" height="200px"></td>
<td class="column2"><img src="assets/large_97c737b9-1e44-41c4-9c47-c92b7ddd2455.jpg" width="233px" height="200px"></td>
</tr>
<tr>
<td><h4>$0.45</h4></td>
<td><h4>$2.59</h4></td>
<td><h4>$1.90</h4></td>
<td><h4>$2.59lb</h4></td>
<td><h4>$6.29</h4></td>
<td><h4>$0.99</h4></td>
</tr>
<tr>
<td>Banana</td>
<td>Avocado</td>
<td>Full Apple</td>
<td>Yellow Onion</td>
<td>Strawberries</td>
<td>Large Lemon</td>
</tr>
<tr>
<td>-0.41lbs</td>
<td>each</td>
<td>-0.5lbs</td>
<td>n/a</td>
<td>16Oz</td>
<td>each</td>
</tr>
</table>
</div>
You can try this:
table {
border-collapse: collapse;
}
With this border-spacing and empty-cells properties have no effect
I would change how you are formatting your table. Instead of putting everything in a single table, try nesting a table for each fruit inside of your table.
Here is an example:
<table>
<tr>
<td class="column2">
<table>
<tr>
<td><img src="assets/large_acb8138a-77ea-40fe-96fd-237156495af3.jpg" width="235px" height="200px"></td>
</tr>
<tr>
<td><h4>$0.45</h4></td>
</tr>
<tr>
<td>Banana</td>
</tr>
<tr>
<td>-0.41lbs</td>
</tr>
</table>
</td>
// Other products would follow the same convention
</tr>
</table>
And then, for your CSS, get rid of this:
.Popular td {
border-right:1px solid gray;
}
because you won't need the borders on every <td>, just the <td> that contains the nested <table>.
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 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 ?)