I alredy set a :hover effect on the rows of the table using CSS.
The only problem is the hover effect doesn't work, if a table cell has a specific background color, e.g. green. In the sample code this means the 3rd column doesn't change the background color from green (resp. red) to #96c7ef as soon as you move the mouse over it. (It's ok, that the first row also doesn't change the background color. This is intentionally skipped using <thead>.) On the other cells, that don't have any background color, the hover works.
page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" href="./basic.css" type="text/css">
</head>
<body>
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
</body>
</html>
basic.css
.multidata td,.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tbody>tr:hover {
background-color:#96c7ef!important;
}
.tdX {
background-color:red;
font-weight:bold;
}
.tdY {
background-color:green;
font-weight:bold;
}
The hover effect also has the same behaviour, if the style declaration of the two cell (tdX, tdY) is specified as inline style. I specified !important, but nothing changes.
What is wrong with my code ?
If you say just tr hover then you can just change tr background, but td has background and over the tr. So you should say hovered tr's td. So just add
.multidata tbody>tr:hover td {
background-color:#96c7ef!important;
}
.multidata td,.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tbody>tr:hover td {
background-color:#96c7ef!important;
}
.tdX {
background-color:red;
font-weight:bold;
}
.tdY {
background-color:green;
font-weight:bold;
}
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
Better style the TDs of the hovered TR using
.multidata tbody>tr:hover td{
background-color:#96c7ef
}
If you mean that the background color of the rows on hover should also be applied to those cells which do already have a background color (i.e. override this), you can extend the selector for the hover rule to also apply to the cells:
.multidata tbody>tr:hover,
.multidata tbody>tr:hover td {
background-color: #96c7ef!important;
}
Actually it's even sufficient to simply use the second line (i.e. the one including the cells) in the selector, since this will apply to all cells of that row:
.multidata tbody>tr:hover td {
background-color: #96c7ef!important;
}
Here in your full code:
.multidata td,
.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tbody>tr:hover td {
background-color: #96c7ef!important;
}
.tdX {
background-color: red;
font-weight: bold;
}
.tdY {
background-color: green;
font-weight: bold;
}
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
you have forgotten to put <tr> inside <tbody>
something like this
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</tbody>
</table>
.multidata td,.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tr:hover td {
background-color:#96c7ef;
}
.tdX {
background-color:red;
font-weight:bold;
}
.tdY {
background-color:green;
font-weight:bold;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" href="./basic.css" type="text/css">
</head>
<body>
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr class="change_on_hover">
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr class="change_on_hover">
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr class="change_on_hover">
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
</body>
</html>
Related
I am writing in html a table with several rows with a different number of columns. To do that, I am putting several tables, typically each for a specified number of columns.
For example:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Home</title>
</head>
<body>
<table class="border paddingDefault" style="width:60%; border-collapse: collapse;">
<thead>
<tr>
<th valign="middle" width="55%" style="background-color: cyan;" class="column border" ><span style="font-weight: bold;">Name of rule</span></th>
<th valign="middle" width="5%" style="background-color: cyan;" class="column border" ><span style="font-weight: bold;">Status</span></th>
</tr>
</thead>
<tbody>
<tr>
<td valign="middle" class="borderTop paddingDefault">The rule name of index 0</td>
<td valign="middle" align="center" class="borderTop paddingDefault" style="background-color: green;">OK</td>
</tr>
<tr style="border-collapse: collapse;border: 0px; padding:0; margin:0;">
<td valign="middle" class="borderTop paddingDefault">The rule name of index 0</td>
<td valign="middle" align="center" class="borderTop paddingDefault" style="background-color: red;">KO</td>
</tr>
</tbody>
</table>
<table class="borderNone paddingDefault" style="width:60%; border-collapse: collapse;border: 0px; padding:0; margin:0;">
<thead>
<th valign="middle" width="100%"/>
</thead>
<tbody>
<tr>
<td valign="middle" class="border paddingDefault">the error of index 0<br/>
the error of index 1<br/>
the error of index 2<br/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
with the following stylesheet:
table.middle {
vertical-align: middle;
}
table.borderNone, th.borderNone, td.borderNone {
border: none;
border-collapse: collapse;
}
table.paddingDefault, th.paddingDefault, td.paddingDefault {
padding: 10px 10px;
}
table.border, th.border, td.border {
border: 1pt solid black;
border-collapse: collapse;
}
td.borderTop {
border-right: 1pt solid black;
border-left: 1pt solid black;
border-top: 1pt solid black;
border-bottom: none;
border-collapse: collapse;
}
It works, but I have a small space between the two rows (in my case, the two html tables), that I can't remove:
How could I remove this separation?
You only need add this code to your css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
I'm trying to add 3 columns under 'Top 10' table header but when I add values for cells everything gets corrupt
also there's an empty cell just before the 'ID' cell, I don't know where it came from
<html>
<head>
<title>ss</title>
<style>
table { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }
</style>
</head>
<body>
<center>
<table border="1">
<thead>
<tr>
<th align="center">
<font face="Arial, Helvetica, sans-serif"></font>
</th>
<th align="center">
<font face="Arial, Helvetica, sans-serif">Site</font>
</th>
<th colspan="4" align="center">
<font face="Arial, Helvetica, sans-serif">Top 10</font>
</th>
</tr>
</thead>
<!-- Table Content -->
<tbody>
<tr>
<td align="center">
<font face="Arial, Helvetica, sans-serif">1</font>
</td>
<td align="center">
<font face="Arial, Helvetica, sans-serif">example</font>
</td>
<td>
<td>ID</td>
<td >Name</td>
<td>From</td>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
your help is appreciated
The HTML of your table is completely off. Make sure you use the right elements and close everything too. And try to apply styling with CSS as much as possible.
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #000000;
}
<table>
<thead>
<tr>
<th></th>
<th>Site</th>
<th colspan="3">Top 10</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">Example</td>
<td>ID</td>
<td>Name</td>
<td>From</td>
</tr>
<tr>
<td>1</td>
<td>Kobo</td>
<td>Jack</td>
</tr>
</tbody>
</table>
you really need to read html specification, font and center tags have several years obsolete, you need to use CSS instead
<!DOCTYPE html>
<html>
<head>
<title>ss</title>
<style>
body {font: "Arial, Helvetica, sans-serif"}
table { width: 90%; border-collapse: collapse; margin: 0 auto;}
td { border: 1px solid #000; }
td.center, th { text-align: center;}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th colspan="4">Header 3</th>
</tr>
</thead>
<!-- Table Content -->
<tbody>
<tr>
<td class="center">Cell 1</td>
<td class="center">Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</tbody>
</table>
</body>
</html>
So I have the following table that I have created using HTML and CSS: However, I would like the three pieces of information under Harvesting to be split divided evenly so that each cell takes the same amount of space in the Harvesting column. Right now, the table cell with electroflocculation takes up the space of 2 cells because I assigned it to temporarly do so using the rowspan attribute when it should ideally be taking up the space of 4/3 of a cell,
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<body>
</html>
You can insert another table in that and style the cells, adding borders to get it done. It's not pretty but it works.
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td rowspan="4" class="Harvesting" style="padding:0;">
<table cellpadding=0 cellspacing=0 width=100% height=100% style="text-align: center">
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Centrifugation</td>
</tr>
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Electrocoagulation</td>
</tr>
<tr>
<td class="Harvesting">Electroflocculation</td>
</tr>
</table>
</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<body>
</html>
I want to apply a background color for the first row in the table. I gave that row a special class name. I also want to apply another color for the rest of the table's rows. The row colors do not get applied.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.
You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.
One final thing - remove display:block from the table, otherwise you will break the layout of the table.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
border: 1;
width:100%;
/* remove display block from here otherwise your table layout will break */
}
/*put this first*/
.table td {
background-color: lightblue;
}
/*override with this*/
.head td {
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
More information on css specificity
One solution is to increase the specificity of the CSS settings for .head
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.table .head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>
<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>
Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific
In addiction to Pete's answer, I would like to say that if you want to create a table header to use the proper tag <th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the element)
Standard cells - contains data (created with the element) The text in elements are bold and centered by default.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
Remove the class head in the tr then add !important. For some reason the color is not changing without !important even if I re-arranged the css
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow !important;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
As #Pete mentioned, your specificity is incorrect. On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead>. This is better for accessibility as it clearly defines you "head" as a table header.
Take a look at the w3c docs on <table> markup for accessibilty # https://www.w3.org/WAI/tutorials/tables/
or for general information about the markup check out the amazing Mozilla documentation # https://developer.mozilla.org/en/docs/Web/HTML/Element/table
Something like this:
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
thead th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
tbody td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<thead>
<tr id="head">
<th>Name</td>
<th>Type</td>
</tr>
</thead>
<tbody>
<tr class="initial-row">
<td>Text here</td>
<td>Text here</td>
</tr>
<tr class="second-row">
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>
</body>
</html>
<tr id="head" class="head">
<th class="head">Name</td> <!-- change to th (table heading) -->
<th class="head">Type</td>
</tr>
css:
th{
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table tr {
background-color: lightblue;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
I think that should be codes above.
What is causing scroll bar to not be clipped on side of table in this fiddle: http://jsfiddle.net/m4HB3/8/ At the moment it is underneath the last column, meaning it is taking up some of that columns space and thus causing alignment issues with the table.
The table headers are fixed as I want a scrolling table with fixed headers.
Could the problem be the width set for the table and individual columns?
Can somebody please also text their answer on a script outside jsfiddle and put it straight on a browser because I have seen examples where something is working in jsifddle but then not working in main application on browser.
HTML:
<table id="tableqanda" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="5%" class="questionno">Question No.</th>
<th width="27%" class="question">Question</th>
<th width="7%" class="option">Option Type</th>
<th width="11%" class="image">Image</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">1</td>
<td width="27%" class="question">What is a RAM?</td>
<td width="7%" class="option">A-E</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr class="tableqandarow">
<td width="5%" class="questionno">2</td>
<td width="27%" class="question">Name 3 car maneuvers you may do in a test?</td>
<td width="7%" class="option">A-F</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
</tbody>
</table>
</div>
CSS:
#tableqanda_onthefly_container
{
width:100%;
overflow-y: auto;
overflow-x: hidden;
max-height:25px;
}
#tableqanda_onthefly
{
width:100%;
overflow-y: auto;
overflow-x: hidden;
clear:both;
}
#tableqanda_onthefly td
{
border:1px black solid;
border-collapse:collapse;
}
#tableqanda, #tableqanda_onthefly{
border:1px black solid;
border-collapse:collapse;
table-layout:fixed;
word-wrap:break-word;
}
#tableqanda{
width:100%;
margin-left:0;
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;
}
UPDATE:
http://jsfiddle.net/m4HB3/37/
I have a js fiddle which works perfectly. But if you copy code into a standard html, the columns are not aligned. If you can get the columns aligned correctly with their headings with the scroll bar on the side of the table, then that will be perfect answer
Is that something what could work for you?
Using here script/jQuery within your div to scroll, slightly modified css to give side scrolling.
Please see: http://jsfiddle.net/m4HB3/177
Here's standalone version: http://webapper.pl/demo.html
I didn't spend much time on css but i'm sure you could make it look pretty.
var ele = $('.scroll');
var scroll = 25;
$('.up').on('click',function() {
ele.scrollTop( ele.scrollTop() - scroll );
});
$('.down').on('click',function() {
ele.scrollTop( ele.scrollTop() + scroll );
});
Or you can use static table width (that would also fix your problem):
http://jsfiddle.net/m4HB3/178/
Here is a fiddle based on the linked question by Sara:
DEMO
html
<div id="tableContainer" class="tableContainer">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable">
<col width="10%" />
<col width="54%" />
<col width="14%" />
<col width="22%" />
<thead class="fixedHeader">
<tr>
<th class="questionno">Question No.</th>
<th class="question">Question</th>
<th class="option">Option Type</th>
<th class="image">Image</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td class="questionno">1</td>
<td class="question">What is a RAM?</td>
<td class="option">A-E</td>
<td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">2</td>
<td class="question">Name 3 car maneuvers you may do in a test?</td>
<td class="option">A-F</td>
<td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">3</td>
<td class="question">What is a RAM?</td>
<td class="option">A-E</td>
<td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">4</td>
<td class="question">Name 3 car maneuvers you may do in a test?</td>
<td class="option">A-F</td>
<td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">5</td>
<td class="question">What is a RAM?</td>
<td class="option">A-E</td>
<td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">6</td>
<td class="question">Name 3 car maneuvers you may do in a test?</td>
<td class="option">A-F</td>
<td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">7</td>
<td class="question">What is a RAM?</td>
<td class="option">A-E</td>
<td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr>
<td class="questionno">8</td>
<td class="question">Name 3 car maneuvers you may do in a test?</td>
<td class="option">A-F</td>
<td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
</tbody>
</table>
</div>
css
div.tableContainer {
clear: both;
border: 1px solid #963;
overflow: auto;
}
html>body tbody.scrollContent {
display: block;
height: 100px;
overflow: auto;
width: 100%
}
html>body thead.fixedHeader tr {
display: block
}
html>body td {
box-sizing: border-box;
border: 1px solid grey;
}
table .questionno {
width: 10%;
}
table .question {
width: 54%;
}
table .option {
width: 14%;
}
table .image {
width: 22%;
}