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 ?)
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:
Is there a way to make the table column two look like column one while keeping the th tag. The line separating the two still has to be there.
The code I got so far:
.noborders th {
border-bottom: 0;
}
table {
border-collapse: collapse
}
#test {
border-collapse: collapse;
border: 0;
}
<body>
<table cellpadding="0" cellspacing="0" width="100%" border="1">
<th id="test"><b>One</b></th>
<th><b>Two</b></th>
<tr>
<td id="test"></td>
<td></td>
</tr>
</body>
What I want it to look like
What it looks like
First, place your <th> inside <tr>...
Use class instead of id(id should be unique)
Just set border:0 to all td, th and apply border-right to .test
th,
td {
border: 0;
}
td {
padding: 20px;
}
table {
border-collapse: collapse
}
.test {
border-collapse: collapse;
border-right: 1px solid;
}
<table cellpadding="0" cellspacing="0" width="100%" border="1">
<tr>
<th class="test"><b>One</b></th>
<th><b>Two</b></th>
</tr>
<tr>
<td class="test"></td>
<td></td>
</tr>
</table>
You have a lot of terrible code here. For one, fix your formatting, for two, you're missing a lot of tags (closing </body>, and a <tr> wrapping your headers). Three, you don't even have the class you're referencing in your css on the table itself. Fourth, you can't have multiple ID's with the same name.
<style>
.noborders th {
border-bottom:0;
}
table {
border-collapse:collapse
}
#test {
border: 0;
}
</style>
HTML
<body>
<table class="noborders" cellpadding="0" cellspacing="0" width="100%" border="1">
<tr>
<th id="test"><b>One</b></th>
<th><b>Two</b></th>
</tr>
<tr>
<td id="test2"></td>
<td></td>
</tr>
</table>
</body>
there is th/td property called “rowspan” that will do what you want.
https://www.w3schools.com/tags/att_td_rowspan.asp
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?
I have following HTML code with style...
Below is the table with 5 rows... only table corner is getting bordered not the rows.
I want the rows as well outlined with same style.
<table width="330" cellspacing="0" cellpadding="0" style="border-width:1px;border-color:black;border-style:solid;border-collapse: collapse;" >
Out put is coming as
You need to set the style on the <tr> tag.
<tr style="border:1px solid #000"></tr>
Since people seem to be a bit lazy one this one I have created a demo to better explain this.
HTML:
<table width="330" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
CSS:
table {
border-width:1px;
border-color:black;
border-style:solid;
border-collapse:collapse;
}
tr {
border: 1px solid;
}
td {
width: 100px;
height: 40px;
}
DEMO HERE
You put the border on tr for the rows. If you want the cells you put it on td. You should also use border-collapse:collapse; on the table. Have a play with it to see what how it works. In short it will collapse the borders into single border (so they don't sit next to each other causing a larger border)
CSS:
td {
width: 100px;
height: 40px;
border: 1px solid;
}
DEMO HERE
Update:
Table with a class:
CSS:
.ruddy {
border-width:1px;
border-color:black;
border-style:solid;
border-collapse:collapse;
}
HTML:
<table class="ruddy" width="330" cellspacing="0" cellpadding="0">
</table>
DEMO HERE
Read on border-collapse.
Specifically, you need border-collapse: collapse;
actually border in css for the table will be applicable only on the table not on TR..
because CSS define for the table can not be inherit on TR or TD
if you want to have border on TR then u must define the border property in CSS for the TR element
tr
{
border:1px solid black;
}
or for column use the TD instead for TR.
To give borders to ROWS you need is another rule:
table tr{
border:1px #000;
}
in html
<table width="330" cellspacing="0" cellpadding="0" class='table' >
in css
.table
{
border:1px solid #000;
}
.table td,.table tr
{
border-collapse: collapse;
}
You should apply the style at tr not the table, so it goes like the following:
<tr style="border-width:1px;border-color:black;border-style:solid;">
But I think it's easier if you use the border attribute. The output is almost similar:
<table border="1" width="330" cellspacing="0" cellpadding="0" >
I am having trouble align the columns in my table with their table headings, the strange thing that is aligns in the Jsfiddle here with no problems: http://jsfiddle.net/m4HB3/68/
But in my application with the exact same code, it does no align the columns correctly with their headings: application
My question is what do I need to include in the application in order to fix this alignment issue in the application?
Below is code:
HTML:
<table id="tableqanda" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="5%" class="questionno">Question No</th>
<th width="23%" class="question">Question</th>
<th width="7%" class="option">Option Type</th>
<th width="6%" class="noofanswers">Number of Answers</th>
<th width="7%" class="answer">Answer</th>
<th width="6%" class="noofreplies">Number of Replies</th>
<th width="6%" class="noofmarks">Number of Marks</th>
<th width="11%" class="image">Image</th>
<th width="11%" class="video">Video</th>
<th width="11%" class="audio">Audio</th>
</tr>
</thead>
</table>
<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
<tbody>
<tr class="tableqandarow">
<td width="5%" class="questionno">Question No.</td>
<td width="23%" class="question">Question</td>
<td width="7%" class="option">Option</td>
<td width="6%" class="noofanswers">Number of Answers</td>
<td width="7%" class="answer">Answer</td>
<td width="6%" class="noofreplies">Number of Replies</td>
<td width="6%" class="noofmarks">Number of Marks</td>
<td width="11%" class="image"><ul><li>Image</li></ul></td>
<td width="11%" class="video"><ul><li>Video</li></ul></td>
<td width="11%" class="audio"><ul><li>Audio</li></ul></td>
</tr>
</tbody>
</table>
</div>
CSS:
#tableqanda_onthefly_container
{
max-height: 25px;
width: 100%;
overflow-y: scroll;
}
#tableqanda_onthefly
{
width:100%;
clear:both;
table-layout: fixed;
}
#tableqanda_onthefly td
{
border:1px black solid;
border-collapse:collapse;
}
#tableqanda, #tableqanda_onthefly{
border:1px black solid;
border-collapse:collapse;
word-wrap:break-word;
}
#tableqanda{
width:97%;
margin-left:0;
table-layout: fixed;
float:left;
}
#tableqanda td {
vertical-align: middle;
border:1px black solid;
border-collapse:collapse;
}
#tableqanda th{
border:1px black solid;
border-collapse:collapse;
text-align:center;
}
.tableqandarow{
border:1px black solid;
border-collapse:collapse;
}
.imagetd{
font-size:75%;
}
.audiotd{
font-size:75%;
}
.videotd{
font-size:75%;
}
.qandaul{
list-style-type:square;
}
ul, ul li { margin: 0; padding: 0; }
ul { margin-left: 1.3em; }
Your column widths don't add up to 100%; if you leave it to the browser to resolve this, you can't be certain that the alignment will match what you have in your head.
Change the widths to add up to 100% and you should be fine.