This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
table cell width issue
I have a table set up as
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
</body>
</html>
How do i get the 2 rows to have different cell width?
One solution would be to divide your table into 20 columns of 5% width each, then use colspan on each real column to get the desired width, like this:
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
</colgroup>
<tr>
<td colspan=5>25</td>
<td colspan=10>50</td>
<td colspan=5>25</td>
</tr>
<tr>
<td colspan=10>50</td>
<td colspan=6>30</td>
<td colspan=4>20</td>
</tr>
</table>
</body>
</html>
JSFIDDLE
As far as i know that is impossible and that makes sense since what you are trying to do is against the idea of tabular data presentation. You could however put the data in multiple tables and remove any padding and margins in between them to achieve the same result, at least visibly. Something along the lines of:
<html>
<head>
<style type="text/css">
.mytable {
border-collapse: collapse;
width: 100%;
background-color: white;
}
.mytable-head {
border: 1px solid black;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-head td {
border: 1px solid black;
}
.mytable-body {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-body td {
border: 1px solid black;
border-top: 0;
}
.mytable-footer {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.mytable-footer td {
border: 1px solid black;
border-top: 0;
}
</style>
</head>
<body>
<table class="mytable mytable-head">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="16%">16</td>
<td width="68%">68</td>
<td width="16%">16</td>
</tr>
</table>
<table class="mytable mytable-footer">
<tr>
<td width="20%">20</td>
<td width="30%">30</td>
<td width="50%">50</td>
</tr>
</table>
</body>
</html>
JSFIDDLE
I don't know your requirements but i'm sure there's a more elegant solution.
You can't have cells of arbitrarily different widths, this is generally a standard behaviour of tables from any space, e.g. Excel, otherwise it's no longer a table but just a list of text.
You can however have cells span multiple columns, such as:
<table>
<tr>
<td>25</td>
<td>50</td>
<td>25</td>
</tr>
<tr>
<td colspan="2">75</td>
<td>20</td>
</tr>
</table>
As an aside, you should avoid using style attributes like border and bgcolor and prefer CSS for those.
with 5 columns and colspan, this is possible (click here) (but doesn't make much sense to me):
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="5%">
<col width="20%">
</colgroup>
<tr>
<td>25</td>
<td colspan="2">50</td>
<td colspan="2">25</td>
</tr>
<tr>
<td colspan="2">50</td>
<td colspan="2">30</td>
<td>20</td>
</tr>
</table>
Related
I have created a html table as it is seen in the picture below, now I want the packing list cell to span five rows down. I have tried several ways but have not succeeded. Looks simple but its killing me, help guys!
Image link here of the Table
<TABLE border=1 style="width: 100%; border-collapse: collapse; border: 1px solid black;">
<colgroup>
<col style="width: 43%">
<col style="width: 11%">
<col style="width: 24%">
<col style="width: 35%">
</colgroup>
<THEAD>
<TR>
<TH rowspan="5"><b>ISSUER</b></TD>
<TH style="text-align:center" colspan="3" rowspan="5">PACKING LIST</TD>
</TR>
</THEAD>
<TR>
<td>
<p>Jonathan Vehicle Assemblers Limited</p>
<p>Plot 673 TA Industrial Park</p>
<p>Kibaha, Tanzania</p>
</td>
</TR>
<TR>
<td><b>TO:</b></td>
</TR>
<TR>
<td>
<p>Jifag Motors (T) Limited</p>
<p>Nyerere Road</p>
<p>P.O Box 40935402</p>
</td>
</TR>
<TR>
<td><b>LOCATION:</b></td>
</TR>
<TR>
<td rowspan="3">Assembly at Kibaha, Tanzania</td>
<td colspan="2"><b>PACKING LIST NO.:</b></td>
<td colspan="1"><b>DATE</b></td>
<TR>
<td colspan="2">GFA-PL-2020-00001</td>
<td>06-Nov-20</td>
</TR>
</TABLE>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
<table>
<colgroup>
<col style="width: 43%">
<col style="width: 11%">
<col style="width: 24%">
<col style="width: 35%">
</colgroup>
<thead>
<tr>
<th rowspan="5"><b>ISSUER</b></th>
<th style="text-align:center" colspan="3" rowspan="5">PACKING LIST</th>
</tr>
</thead>
<tr>
<td>
<p>Jonathan Vehicle Assemblers Limited</p>
<p>Plot 673 TA Industrial Park</p>
<p>Kibaha, Tanzania</p>
</td>
<td rowspan="4" colspan="3"></td>
</tr>
<tr>
<td><b>TO:</b></td>
</tr>
<tr>
<td>
<p>Jifag Motors (T) Limited</p>
<p>Nyerere Road</p>
<p>P.O Box 40935402</p>
</td>
</tr>
<tr>
<td><b>LOCATION:</b></td>
</tr>
<tr>
<td rowspan="3">Assembly at Kibaha, Tanzania</td>
<td colspan="2"><b>PACKING LIST NO.:</b></td>
<td colspan="1"><b>DATE</b></td>
<tr>
<td colspan="2">GFA-PL-2020-00001</td>
<td>06-Nov-20</td>
</tr>
</table>
I am trying to create a table where both rows are three cells. I want the first row to be 3 equal width cells, while the second row has 2 equal width cells (each 1/4 of the first row's cells) and a third cell that fills up the rest of the row.
Here is a picture of what I have now
I want to merge 3+4 in the top table, but when I actually merge them I get the second table.
Here is a fiddle that I have:
http://jsfiddle.net/9n3oyf2w/
<!-- This works: -->
<tr>
<td colspan="4">a</td>
<td colspan="2">b</td>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="1">2</td>
<td colspan="1">3</td>
<td colspan="5">4</td>
</tr>
<!-- This doesn't work: -->
<tr>
<td colspan="4">a</td>
<td colspan="2">b</td>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="1">2</td>
<td colspan="6">3+4</td>
</tr>
I have no clue what I am doing wrong but it has been driving me crazy. I've tried other combinations of colspans and some of them work while others don't.
EDIT:
New pic for what I am trying to achieve:
link
So you want something like this?
table, th, td{
padding: 0;
margin: 0;
border-collapse: collapse;
border:0;
border-spacing:0;
margin-left: auto;
margin-right: auto;
}
table.topInnerTable, table.topInnerTable td{
border: 1px solid black;
border-bottom: 0;
}
table.bottomInnerTable, table.bottomInnerTable td{
border: 1px solid black;
}
<table width="960px">
<tr>
<td>
<table class="topInnerTable" width="100%">
<colgroup>
<col width="320px">
<col width="320px">
<col width="320px">
</colgroup>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="bottomInnerTable">
<tr>
<td width="80px">1</td>
<td width="80px">1</td>
<td width="800px">10</td>
</tr>
</table>
</td>
</tr>
</table>
I believe this is what you want
<table width="100%">
<tr>
<td colspan="3" width="33%">a</td>
<td width="33%">b</td>
<td width="33%">c</td>
</tr>
<tr>
<td width="10%">1</td>
<td width="10%">2</td>
<td colspan="3" width="80%">3+4</td>
</tr>
</table>
The following HTML code displays the value of Heading9 and Heading10 in a separate row instead of displaying right after Heading8 (see ActualOutput image)
Code 1:
<html><body bgcolor="#E6E6FA">
<TABLE cellpadding="5" style="border: 1px solid #000000; border-collapse: collapse;" border="2">
<TH>Heading1</TH>
<TH>Heading2</TH>
<TH>Heading3</TH>
<TH>Heading4</TH>
<TH>Heading5</TH>
<TH>Heading6</TH>
<TH>Heading7</TH>
<TH>Heading8</TH>
<TH>Heading9</TH>
<TH>Heading10</TH>
<TH colspan="20">Heading11</TH>
</TR>
<tbody>
<TR>
<TD rowspan="2">knnjkn</TD>
<TD>ceecev</TD>
<TD>lnlnlkn</TD>
<TD>lknlkn</TD>
<TD>lknkn</TD>
<TD>kjnkljnk</TD>
<TD>lknlkn</TD>
<TD>kjnlkn</TD>
<TD>kjbkn</TD>
</TR>
<TR>
<TD>jknklnk</TD>
<TD>kjnlknknm</TD>
<TD>jnkj n</TD>
<TD>lnnkkl</TD>
<TD>kjnknkj</TD>
<TD>sdwewcw</TD>
<TD>qwdcwcwc</TD>
<TD>csdcs</TD>
</TR>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</tbody>
<tbody>
<TR>
<TD rowspan="2">ddccs</TD>
<TD>csdcs</TD>
<TD>csdcs</TD>
<TD>cswewc</TD>
<TD>csdcsdc</TD>
<TD>cdwdc</TD>
<TD>cdsc</TD>
<TD>zcxascsac</TD>
<TD>csdcdc</TD>
</TR>
<TR>
<TD>dadcc</TD>
<TD>csdc</TD>
<TD>cacsc</TD>
<TD>cdwcc</TD>
<TD>csdd</TD>
<TD>csdc</TD>
<TD>sdcsdc</TD>
<TD>cdscsd</TD>
</TR>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</tbody>
</TABLE>
</html>
Actual Output:
I can get the desired output by changing the code 1 to code 2, however, my bash script gathers Heading9 and Heading10 data only after Heading8 is framed for each body, so I cannot inject Heading9 and 10 in between.
Appreciate if experts can provide a better solution to get the expected output by restructuring the code 1. Unfortunately, code 2 doesn't work in my scenario.
Code 2:
<html><body bgcolor="#E6E6FA">
<TABLE cellpadding="5" style="border: 1px solid #000000; border-collapse: collapse;" border="2">
<TH>Heading1</TH>
<TH>Heading2</TH>
<TH>Heading3</TH>
<TH>Heading4</TH>
<TH>Heading5</TH>
<TH>Heading6</TH>
<TH>Heading7</TH>
<TH>Heading8</TH>
<TH>Heading9</TH>
<TH>Heading10</TH>
<TH colspan="20">Heading11</TH>
</TR>
<tbody>
<TR>
<TD rowspan="2">knnjkn</TD>
<TD>ceecev</TD>
<TD>lnlnlkn</TD>
<TD>lknlkn</TD>
<TD>lknkn</TD>
<TD>kjnkljnk</TD>
<TD>lknlkn</TD>
<TD>kjnlkn</TD>
<TD>kjbkn</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</TR>
<TR>
<TD>jknklnk</TD>
<TD>kjnlknknm</TD>
<TD>jnkj n</TD>
<TD>lnnkkl</TD>
<TD>kjnknkj</TD>
<TD>sdwewcw</TD>
<TD>qwdcwcwc</TD>
<TD>csdcs</TD>
</TR>
</tbody>
<tbody>
<TR>
<TD rowspan="2">ddccs</TD>
<TD>csdcs</TD>
<TD>csdcs</TD>
<TD>cswewc</TD>
<TD>csdcsdc</TD>
<TD>cdwdc</TD>
<TD>cdsc</TD>
<TD>zcxascsac</TD>
<TD>csdcdc</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</TR>
<TR>
<TD>dadcc</TD>
<TD>csdc</TD>
<TD>cacsc</TD>
<TD>cdwcc</TD>
<TD>csdd</TD>
<TD>csdc</TD>
<TD>sdcsdc</TD>
<TD>cdscsd</TD>
</TR>
</tbody>
</TABLE>
</html>
Expected Output:
Add Following may this help...
<style>
table
{
border: 1px solid #000000;
border-collapse: collapse;
display:table;
position:relative;
width:100%;
}
table tr
{
display: table-row;
height: 35px;
line-height: 30px;
width: 100%;
}
table td
{
direction: ltr;
display: table-cell;
margin: 0;
padding: 5px;
table-layout: fixed;
}
</style>
Is there a more elegant solution to achieve the same effect as this?
The code I've got so far is this:
<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<style type="text/css">
table { border-collapse: collapse; }
td { border: solid 1px; }
td.nest { padding: 0px; }
td.nest table td { border-width: 0px 1px; }
td.nest table td:first-child { border-left: none; }
td.nest table td:last-child { border-right: none; }
</style>
</head>
<body>
<table>
<colgroup>
<col style="width: 3em;"/>
<col style="width: 6em;"/>
<col style="width: 9em;"/>
</colgroup>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><!-- Somehow get rid of the nested table and keep just the tds -->
<td class="nest" colspan="3">
<table>
<tr>
<td style="width: 4em;">1</td>
<td style="width: 6em;">2</td>
<td style="width: 8em;">3</td>
</tr>
</table>
</td>
</tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</body>
</html>
The only way I can get this working so far is to nest another table inside the first. I don't like it much because ideally I only want one table and there's a lot of extra CSS to match the borders of the first table without adding to the cell (colspan="3") size. I want to be able to replace the nested table with just a normal <tr> with three <td>s in it.
The only other way I've found to change the width of one cell without affecting the other cells in the column is with position: absolute; but then the next cell in the row is shifted to the left by the width of the adjusted cell, so that doesn't work fully. It's also too hard to get the widths just right.
So, is there any way to get the same effect using just one table, no extra <div>s, etc. and just simple CSS? This example should have only one <table>, nine <td>s and no colspan=s. I'm looking for a pure CSS solution if one exists. It should be able to cope with any arbitrary widths as long as they add up to the original width.
No, this is not possible without subtables.
What you are trying to do is against the idea of tabular data presentation.
If you don't want a table, don't use a table.
You could however put your data into divs with style="display: table-cell;".
On a second thought, you could use colspan in all 3 rows.
So your table actually looks like this:
<col style="width: 3em;"/>
<col style="width: 1em;"/>
<col style="width: 5em;"/>
<col style="width: 1em;"/>
<col style="width: 8em;"/>
<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
border: solid 1px;
}
td.nest {
padding: 0px;
}
td.nest table td {
border-width: 0px 1px;
}
td.nest table td:first-child {
border-left: none;
}
td.nest table td:last-child {
border-right: none;
}
</style>
</head>
<body>
<table >
<colgroup>
<col style="width: 3em;" />
<col style="width: 1em;" />
<col style="width: 5em;" />
<col style="width: 1em;" />
<col style="width: 8em;" />
</colgroup>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td colspan="2">1</td>
<td colspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td colspan="2">3</td>
</tr>
</table>
</body>
</html>
Yes...but you'll have to use some CSS trickery to 'fake' it.
What the below does is use psuedo elements for the inner borders, offsetting them as appropriate for the middle row.
Demo Fiddle
CSS
table {
border-collapse: collapse;
table-layout:fixed;
}
td {
border: solid 1px;
border-width:1px 0px 1px 0px;
width:33%;
position:relative;
}
td:nth-child(1) {
border-left:solid 1px;
}
td.nest {
padding: 0px;
}
td.nest table td {
border-width: 0px 1px;
}
td.nest table td:first-child {
border-left: none;
}
td.nest table td:last-child {
border-right: none;
}
td:after {
content:'';
position:absolute;
right:0;
border-right:1px solid black;
top:0;
bottom:0;
}
tr:nth-child(2) td:nth-of-type(1):after, tr:nth-child(2) td:nth-of-type(2):after {
right:-20px;
}
tr:nth-child(2) td:nth-of-type(2), tr:nth-child(2) td:nth-of-type(3) {
padding-left:25px;
}
HTML
<table>
<colgroup>
<col style="width: 3em;" />
<col style="width: 6em;" />
<col style="width: 9em;" />
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
You can use next html for example :
<table style="width: 300px;">
<colgroup>
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
</colgroup>
<tbody>
<tr>
<td></td>
<td colspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
You have to use the unit % instead of pixels its work for me.
width:30%
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%;
}