Columns in table not aligning in application - html

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.

Related

Setting the Width of a Table Subheading in CSS

I've got a table like the one pictured above, which uses both colspan and rowspan. I want to fix all the column widths. I can do the first and last (No and Remark), and I can set the width of Types. How can I specify the widths of A, B and C?
I've tried giving cells A, B and C CSS classes and setting individual widths but this does not have any effect. The widths are always controlled by any content in the cells below.
table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
th, td {
border:solid 1px #000;
padding:.5em;
}
.no {
width:10%;
}
.type {
width:50%;
}
.remark {
width:40%;
}
/* these don't work */
.type-a {
width:10%;
}
.type-b {
width:15%;
}
.type-c {
width:25%;
}
<table>
<thead>
<tr>
<th rowspan="2" class="no">No</th>
<th colspan="3" class="type">Type</th>
<th rowspan="2" class="remark">Remark</th>
</tr>
<tr>
<th class="type-a">A</th>
<th class="type-b">B</th>
<th class="type-c">C</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Is it possible without resorting to placing fixed width divs inside the cells?

change table-layout:auto
table {
border-collapse:collapse;
table-layout:auto;
width:100%;
}

Change the table-layout property to auto:
table {
border-collapse:collapse;
table-layout: auto;
width:100%;
}
th, td {
border:solid 1px #000;
padding:.5em;
}
.no {
width:10%;
}
.type {
width:50%;
}
.remark {
width:40%;
}
/* these don't work */
.type-a {
width:10%;
}
.type-b {
width:15%;
}
.type-c {
width:25%;
}
<table>
<thead>
<tr>
<th rowspan="2" class="no">No</th>
<th colspan="3" class="type">Type</th>
<th rowspan="2" class="remark">Remark</th>
</tr>
<tr>
<th class="type-a">some long text to see the width remains the same </th>
<th class="type-b">B</th>
<th class="type-c">C</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

background-color css property not working in table

Here is html and CSS code:
table,th,td{
border:1px solid blue;
border-collapse:collapse;
}
td{
text-align:center;
}
td{padding:10px;
color:#cc7722;
}
table{
border-spacing:5px;
background-color:yellowgreen;
font-weight:bold;
width:100%
}
#hello{
color:red;
}
.hi{
background-color:blue;
}
<table>
<caption id="hello">Employee Data</caption>
<tr>
<div class="hi">
<th>Employee Name</th>
<th>
Department
</th>
<th>Salary</th>
</div>
</tr>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>
Output
Here background color blue for class hi not shown
so what can be the reason
and what is the possible solution for this

If you use div as anything other than a cell value, you'll get misbehaving browsers.
Wrap your header row definition around the thead tag and style that instead. Don't forget to then wrap the body around tbody.
table,
th,
td {
border: 1px solid blue;
border-collapse: collapse;
}
td {
text-align: center;
}
td {
padding: 10px;
color: #cc7722;
}
table {
border-spacing: 5px;
background-color: yellowgreen;
font-weight: bold;
width: 100%
}
#hello {
color: red;
}
.hi {
background-color: blue;
}
<table>
<caption id="hello">Employee Data</caption>
<thead class="hi">
<tr>
<th>Employee Name</th>
<th>
Department
</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</tbody>
</table>

you can't use a div within a table for styling. just apply the class to the tr itself
html
<table>
<caption id="hello">Employee Data</caption>
<tr class="hi">
<th>Employee Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>

Your table shouldn't have a div inside, instead you have to do like this:
<tr class="hi">

add div inside th,td it'll work not outside
table,th,td{
border:1px solid blue;
border-collapse:collapse;
}
td{
text-align:center;
}
td{padding:10px;
color:#cc7722;
}
table{
border-spacing:5px;
background-color:yellowgreen;
font-weight:bold;
width:100%
}
#hello{
color:red;
}
.hi{
background-color:blue;
}
<table>
<caption id="hello">Employee Data</caption>
<tr>
<th>Employee Name</th>
<th>
Department
</th>
<th>Salary</th>
</div>
</tr>
<tr>
<td><div class="hi">Vaibhav</div></td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>

I think what you want to do is changing the <tr> background, which you can easily accomplish by removing your <div> and giving the class to your <tr> tag. As the following:
<table>
<caption id="hello">Employee Data</caption>
<tr class="hi">
<th>Employee Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>
And your CSS is just the same.
table,th,td{
border:1px solid blue;
border-collapse:collapse;
}
td{
text-align:center;
}
td{padding:10px;
color:#cc7722;
}
table{
border-spacing:5px;
background-color:yellowgreen;
font-weight:bold;
width:100%
}
#hello{
color:red;
}
.hi{
background-color:blue;
}

Does moving the class to the th accomplish what you are wanting?
table,th,td{
border:1px solid blue;
border-collapse:collapse;
}
td{
text-align:center;
}
td{padding:10px;
color:#cc7722;
}
table{
border-spacing:5px;
background-color:yellowgreen;
font-weight:bold;
width:100%
}
#hello{
color:red;
}
.hi{
background-color:blue;
}
<table>
<caption id="hello">Employee Data</caption>
<tr class="hi">
<th >Employee Name</th>
<th>
Department
</th>
<th>Salary</th>
</tr>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>

If possible to change html then You can use combination of thead, tbody to set different colors to table head and body.
Example
<style>
thead {color:green;}
tbody {background:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
</style>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
All tr in tbody will have background blue.
Otherwise you have to use styling for tr, th separately

Zooming on Chrome causes CSS position changes

I have table layout as fixed
table {
padding: 8px;
width: 100%;
table-layout: fixed;
}
td,
th {
text-align: center;
padding: 8px;
table-layout: auto;
}
<table>
<tr>
<th>Part No</th>
<th>Description</th>
<th style="text-align:center; width:100%; position:relative;z-index:5;">Part Status</th>
<th>Zone</th>
<th>Min Qty</th>
<th>Max Qty</th>
<th>Cost</th>
<th>Proposed Cost</th>
<th>Varience (%)</th>
<th style="text-align:center; width:100%;">Status</th>
<th>Pending Removal</th>
<th>Approvl Status</th>
<th>Locked</th>
<th>EffectiveDate</th>
</tr>
</table>
The part status and status columns there TD changing its position when i zoom it to -25%.
In image you can find partstatus(6th column) its td position is changed.
Can anybody help me out how can i solve this.

Use flex. display:inline-flex; on table.
table {
padding: 8px;
width: 100%;
table-layout: fixed;
display:inline-flex;
}
td,
th {
text-align: center;
padding: 8px;
table-layout: auto;
}
<table>
<tr>
<th>Part No</th>
<th>Description</th>
<th style="text-align:center; width:100%; position:relative;z-index:5;">Part Status</th>
<th>Zone</th>
<th>Min Qty</th>
<th>Max Qty</th>
<th>Cost</th>
<th>Proposed Cost</th>
<th>Varience (%)</th>
<th style="text-align:center; width:100%;">Status</th>
<th>Pending Removal</th>
<th>Approvl Status</th>
<th>Locked</th>
<th>EffectiveDate</th>
</tr>
</table>

Cannot make table row change color on hover

I made on hover color changer for table data but I want to change it for whole table row on hover, but it doesn't work when I change td:hover to tr:hover. What am I doing wrong?
JsFiddle: https://jsfiddle.net/uwvvmpok/
HTML:
<div class="content">
<div class="header">
</div>
<a name="172016">
<!--1. riadok H-->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th width="50px">C. u.</th>
<th width="30px">Zobrazit</th>
<th width="30px">Typ</th>
<th width="200px">Cislo/Meno</th>
<th width="600px">Popis</th>
<th width="130px">System</th>
<th width="100px">Dopad/Symptom</th>
<th width="100px">Dátum zadania</th>
<th width="100px">Dátum vzniku</th>
<th width="100px">Datum Verifikacie</th>
<th width="80px">Ukoncenie</th>
<th width="500px">Komentár</th>
<th width="100px">Dátum</th>
<th width="60px">Počet</th>
</tr>
<!--2. riadok D-->
<tr>
<td style="text-align:center;background-color: #d0f5f6">100</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKA</td>
<td class="tooltip">Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="ttext">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span> </td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td>ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</td>
<td style="text-align:center">07/07/2016</td>
<td style="text-align:center">2</td>
</tr>
CSS:
.content {
position: static;
}
.header {
text-align: center;
position: relative;
margin-top: 40px;
}
th, td{
border:1px solid black;
overflow: hidden;
}
th{
background-color: #eff0f0;
}
td{
background-color: #eed6b1;
height: 50px;
}
table{
table-layout: fixed;
min-width: 2000px;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
.DZ {
text-align: center;
}
td:hover{
background-color: #b0b0b0;
}

Try changing the background color of the td when the row is hovered.
tr:hover td {
background: #b0b0b0;
}
https://jsfiddle.net/j0aj1p80/

table row not matching width of table headings

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 ?)