I have the following snippet. It has one problem - the Enter your passcode: td occupies too much space, and looks ugly.
I've tried to set width:50% to that, but it didn't work out.
What I'm trying to achieve is that the input field goes line in line to the Expertise Organization button.
How can I do that?
Thanks in advance.
.prettyEGRZButton {
width: 100%;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
border: 1px solid #05788d;
color: #05788d;
background: transparent;
}
.prettyEGRZButtonActive {
color: white;
background: #05788d;
}
<div id="view:_id1:egrzFinishAuthPopUp" class="egrzFinishAuthPopUp">
<div id="view:_id1:organizationsRepeat">
</div>
<div id="view:_id1:rolesRepeat">
</div>
<table id="view:_id1:egrzFinishAuthPopUpTable" role="presentation">
<tbody>
<tr align="center">
<td>
<span class="xspTextLabel">To proceed, please authorize</span>
</td>
</tr>
<tr align="center">
<td>
<span class="xspTextLabel">Authorize as natural person</span>
</td>
</tr>
<tr id="view:_id1:authAsPersonTr">
<td id="view:_id1:authAsPersonTd">
<button class="prettyEGRZButton" type="button" name="view:_id1:authAsPersonButton" id="view:_id1:authAsPersonButton">John Doe</button>
</td>
</tr>
<tr align="center">
<td>
<span class="xspTextLabel">Authorize as organization</span>
</td>
</tr>
<tr id="view:_id1:organizationsRepeat:0:authAsOrgTr">
<td id="view:_id1:organizationsRepeat:0:authAsOrgTd">
<button class="prettyEGRZButton" type="button" name="view:_id1:organizationsRepeat:0:authAsOrgButton" id="view:_id1:organizationsRepeat:0:authAsOrgButton">Company 1</button>
</td>
</tr>
<tr id="view:_id1:organizationsRepeat:1:authAsOrgTr">
<td id="view:_id1:organizationsRepeat:1:authAsOrgTd">
<button class="prettyEGRZButton prettyEGRZButtonActive" type="button" name="view:_id1:organizationsRepeat:1:authAsOrgButton" id="view:_id1:organizationsRepeat:1:authAsOrgButton">Company 2</button>
</td>
</tr>
<tr id="view:_id1:rolesRepeat:0:roleTr">
<td id="view:_id1:rolesRepeat:0:roleTd">
<button class="prettyEGRZButton" type="button" name="view:_id1:rolesRepeat:0:roleButton" id="view:_id1:rolesRepeat:0:roleButton">Government Organization</button>
</td>
</tr>
<tr id="view:_id1:rolesRepeat:1:roleTr">
<td id="view:_id1:rolesRepeat:1:roleTd">
<button class="prettyEGRZButton" type="button" name="view:_id1:rolesRepeat:1:roleButton" id="view:_id1:rolesRepeat:1:roleButton">Expertise Organization</button>
</td>
</tr>
<tr>
<td>
<span class="xspTextComputedField">Enter your passcode:</span>
</td>
<td>
<input id="view:_id1:inputText1" type="password" name="view:_id1:inputText1" value="" class="xspInputFieldSecret">
</td>
</tr>
</tbody>
</table>
</div>
Your first couple tr are one td only. So the bottom tr need to honor it. You can use two rows to make it align.
.prettyEGRZButton
{
width: 100%;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
border: 1px solid #05788d;
color: #05788d;
background: transparent;
}
.prettyEGRZButtonActive
{
color: white;
background: #05788d;
}
.xspInputFieldSecret{
width:100%;
}
<div id="view:_id1:egrzFinishAuthPopUp" class="egrzFinishAuthPopUp"><div id="view:_id1:organizationsRepeat">
</div><div id="view:_id1:rolesRepeat">
</div><table id="view:_id1:egrzFinishAuthPopUpTable" role="presentation"><tbody><tr align="center"><td><span class="xspTextLabel">To proceed, please authorize</span></td>
</tr>
<tr align="center"><td><span class="xspTextLabel">Authorize as natural person</span></td>
</tr>
<tr id="view:_id1:authAsPersonTr"><td id="view:_id1:authAsPersonTd"><button class="prettyEGRZButton" type="button" name="view:_id1:authAsPersonButton" id="view:_id1:authAsPersonButton">John Doe</button></td>
</tr>
<tr align="center"><td><span class="xspTextLabel">Authorize as organization</span></td>
</tr>
<tr id="view:_id1:organizationsRepeat:0:authAsOrgTr"><td id="view:_id1:organizationsRepeat:0:authAsOrgTd"><button class="prettyEGRZButton" type="button" name="view:_id1:organizationsRepeat:0:authAsOrgButton" id="view:_id1:organizationsRepeat:0:authAsOrgButton">Company 1</button></td>
</tr>
<tr id="view:_id1:organizationsRepeat:1:authAsOrgTr"><td id="view:_id1:organizationsRepeat:1:authAsOrgTd"><button class="prettyEGRZButton prettyEGRZButtonActive" type="button" name="view:_id1:organizationsRepeat:1:authAsOrgButton" id="view:_id1:organizationsRepeat:1:authAsOrgButton">Company 2</button></td>
</tr>
<tr id="view:_id1:rolesRepeat:0:roleTr"><td id="view:_id1:rolesRepeat:0:roleTd"><button class="prettyEGRZButton" type="button" name="view:_id1:rolesRepeat:0:roleButton" id="view:_id1:rolesRepeat:0:roleButton">Government Organization</button></td>
</tr>
<tr id="view:_id1:rolesRepeat:1:roleTr"><td id="view:_id1:rolesRepeat:1:roleTd"><button class="prettyEGRZButton" type="button" name="view:_id1:rolesRepeat:1:roleButton" id="view:_id1:rolesRepeat:1:roleButton">Expertise Organization</button></td>
</tr>
<tr><td><span class="xspTextComputedField">Enter your passcode:</span></td>
</tr><tr>
<td><input id="view:_id1:inputText1" type="password" name="view:_id1:inputText1" value="" class="xspInputFieldSecret"></td>
</tr>
</tbody></table>
</div>
Related
I would like to make a table in html. It is supposed to display two rows and three columns. For some reason, currently the margins of the table cells keep expanding.
The first cell has a small margin, the second cell has bigger margins, the third cell's margins are even bigger, and so on. It keeps getting bigger and bigger.
I have attached a screenshot that shows how it currently looks:
Table with expanding margins
Here is my HTML & CSS code respectively:
html {
text-align: center;
}
body {
background-color: antiquewhite;
width: 50%;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}
table,
td {
margin-right: auto;
margin-left: auto;
table-layout: fixed;
}
<table>
<tr>
<td colspan="6">
<h1>Voici la liste de modules</h1>
</td>
</tr>
<tr>
<td colspan="2">
<button class="bouton_module" onlcick="window.location.href='m01/module1.html';">Module 1</button>
</td>
<td colspawn="2">
<button class="bouton_module" onclick="window.locaiton.href='m02/module2.html';">Module 2</button>
</td>
<td colspan="2">
<button class="bouton_module" onclick="window.location.href='m03/module3.html';">Module 3</button>
</td>
</tr>
<tr>
<td colspan="2">
<button class="bouton_module" onclick="window.location.href='m04/module4.html';">Module 4</button>
</td>
<td colspan="2">
<button class="bouton_module">Module 5</button>
</td>
<td colspan="2">
<button class="bouton_module">Module 6</button>
</td>
</tr>
</table>
You were mishandling the colspan and rowspan of cells, plus a misspelled ("colspaWn"). I just removed that and inserted the td {text-align: center;} rule. Note that you can enter td { outline: 1px solid red; } to see its lines without affecting the width.
html {
text-align: center;
}
body {
background-color: antiquewhite;
width: 50%;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}
table, td {
/* outline: 1px solid red; */
text-align: center;
margin-right: auto;
margin-left: auto;
table-layout: fixed;
}
<table>
<tr>
<td colspan="6">
<h1>Voici la liste de modules</h1>
</td>
</tr>
<tr>
<td>
<button class="bouton_module" onlcick="window.location.href='m01/module1.html';">Module 1</button>
</td>
<td>
<button class="bouton_module" onclick="window.locaiton.href='m02/module2.html';">Module 2</button>
</td>
<td>
<button class="bouton_module" onclick="window.location.href='m03/module3.html';">Module 3</button>
</td>
</tr>
<tr>
<td>
<button class="bouton_module" onclick="window.location.href='m04/module4.html';">Module 4</button>
</td>
<td>
<button class="bouton_module">Module 5</button>
</td>
<td>
<button class="bouton_module">Module 6</button>
</td>
</tr>
</table>
I have a problem. I created the following form:
.input-block {
width: 100%;
padding-bottom: 40px;
}
.input-block span {
font-size: 19px;
}
.input-block table {
width: 100%;
border-spacing: 0;
}
.input-block td {
width: 10%
}
.input-block input, select {
width: 50%;
font-size: 16px;
}
.input-block input, select {
padding: 6px 6px;
margin: 8px 0;
display: inline-block;
border: 1px solid #000;
box-sizing: border-box;
}
<div class="input-block">
<h2>Account information</h2>
<table>
<tr>
<td>
<span>Voornaam</span>
</td>
<td>
<input type="text" value="Alexander" />
</td>
</tr>
<tr>
<td>
<span>Tussenvoegsel</span>
</td>
<td>
<input type="text" value="van" />
</td>
</tr>
<tr>
<td>
<span>Achternaam</span>
</td>
<td>
<input type="text" value="Dijk" />
</td>
</tr>
<tr>
<td>
<span>Email</span>
</td>
<td>
<input type="text" value="alexandervdijk#gmail.com" />
</td>
</tr>
</table>
</div>
<div class="input-block">
<h2>Wachtwoord veranderen</h2>
<table>
<tr>
<td>
<span>Nieuw wachtwoord</span>
</td>
<td>
<input type="password" value="" />
</td>
</tr>
<tr>
<td>
<span>Herhaal wachtwoord</span>
</td>
<td>
<input type="password" value="" />
</td>
</tr>
</table>
</div>
<div class="input-block">
<h2>Profiel informatie</h2>
<table>
<tr>
<td>
<span>Geslacht</span>
</td>
<td>
<select id="geslacht" name="geslacht">
<option value="man" selected>Man</option>
<option value="vrouw">Vrouw</option>
</select>
</td>
</tr>
<tr>
<td>
<span>Nationaliteit</span>
</td>
<td>
<select id="nationaliteit" name="nationaliteit">
<option value="nederland" selected>Nederland</option>
<option value="belgie">Belgie</option>
<option value="duitsland">Duitsland</option>
<option value="frankrijk">Frankrijk</option>
</select>
</td>
</tr>
</table>
</div>
Now, this is almost like the way I want, but I can't change 2 things:
I want to decrease the row spacing in the table, so the items are more compact on the screen. The space doesn't need to be gone, but a bit smaller
The input boxes and the names before the input boxes can be closer to each other. I already tried to set a width of 10% on the td in the table, but that didn't work.
Can someone help me change the layout?
I adjusted your code a bit, mostly just the CSS.
Are you looking for something that's more like this?
I put a set width on your input
.input-block input, select {
width: 300px;
font-size: 16px;
}
and decreased width of your input block
.input-block {
width: 70%;
padding-bottom: 40px;
}
.input-block {
width: 70%;
padding-bottom: 40px;
}
.input-block span {
font-size: 19px;
}
.input-block table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.input-block td {
width: 10%;
}
.input-block input, select {
width: 300px;
font-size: 16px;
}
.input-block input, select {
padding: 6px 6px;
margin: 8px 0;
display: inline-block;
border: 1px solid #000;
box-sizing: border-box;
}
<div class="input-block">
<h2>Account information</h2>
<table>
<tr>
<td>
<span>Voornaam</span>
</td>
<td>
<input type="text" value="Alexander" />
</td>
</tr>
<tr>
<td>
<span>Tussenvoegsel</span>
</td>
<td>
<input type="text" value="van" />
</td>
</tr>
<tr>
<td>
<span>Achternaam</span>
</td>
<td>
<input type="text" value="Dijk" />
</td>
</tr>
<tr>
<td>
<span>Email</span>
</td>
<td>
<input type="text" value="alexandervdijk#gmail.com" />
</td>
</tr>
</table>
</div>
</div>
I'm trying to highlight a specific product on the comparison table. The highlight color is Red but i'm having issues when using 1px, but when i use 2px it works fine but 2px is to big.
Also noticed on this code snippet it does not display RED borders after i have added bootstrap, so attaching a screenshot.
My goal is to have Selected Product to be surrounded by RED 1px border. Also i would not mind any other tips of displaying these types of table.
I have also tried this but did not work: https://muffinman.io/fix-for-chrome-not-rendering-borders/
Also looks like this is not Bootstrap issue, if i remove the BS and use border-collapse: collapse; same problem
.table {
margin: 20px;
display: inline-block;
text-align: center;
}
table,
th,
td {
border: 1px solid #ddd;
padding: 10px;
}
th:not(:first-child) {
width: 200px;
}
table,
th {
font-weight: normal;
}
.border-sides {
border-right: 1px solid red !important;
border-left: 1px solid red !important;
}
.border-top {
border-top: 1px solid red !important;
}
.border-bottom {
border-bottom: 1px solid red !important;
}
.bg-selected {
background-color: #b3c2ff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table">
<table>
<thead>
<tr>
<th></th>
<th>
<div class="text-left">
<span>Title - Product 1 Test</span>
</div>
</th>
<th class="border border-top">
<div class="text-left">
<span class="font-weight-bold">Selected Product:</span>
<span>Title - Product 2</span>
</div>
</th>
<th>
<div class="text-left">
<span>Title - Product 2</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
<button class="btn btn-primary">View</button>
</td>
<td class="border border-sides">
<button class="btn btn-primary">Buy now</button>
</td>
<td>
<button class="btn btn-primary">View</button>
</td>
</tr>
<tr class="text-left">
<td>Description 1</td>
<td>Y</td>
<td class="border bg-selected">N</td>
<td>N</td>
</tr>
<tr class="text-left">
<td class="test">Description 2</td>
<td>N</td>
<td class="border bg-selected">N</td>
<td>N</td>
</tr>
<tr>
<td></td>
<td>
<button class="btn btn-primary">View</button>
</td>
<td class="border border-bottom">
<button class="btn btn-primary">Buy now</button>
</td>
<td>
<button class="btn btn-primary">View</button>
</td>
</tr>
</tbody>
</table>
</div>
Also double checked my BS is running first then my CSS or i'm missing something?
Is this the desired ouput?
UPDATED
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<style>
.table {
margin: 20px;
display: inline-block;
text-align: center;
}
table,
.table thead th,
.table td {
border: 1px solid #ddd;
border-collapse: separate;
border-spacing: 0px;
padding: 10px;
}
table {
padding: 0;
border-width: 0 2px 0 0.5px;
}
th:not(:first-child) {
width: 200px;
}
table,
th {
font-weight: normal;
}
.table thead th{
border-top-width: 1px;
}
.table tr:last-child td{
border-bottom-width: 1px;
}
.table thead th, .table td{
border-right: none;
}
.border-sides {
border-right: 1px solid red !important;
border-left: 1px solid red !important;
}
.border-sides + td, .table thead .border-sides + th{
border-left: none;
}
.border-top {
border-top: 1px solid red !important;
}
.border-bottom {
border-bottom: 1px solid red !important;
}
.bg-selected {
background-color: #b3c2ff;
}
</style>
<div class="table">
<table>
<thead>
<tr>
<th></th>
<th>
<div class="text-left">
<span>Title - Product 1 Test</span>
</div>
</th>
<th class="border border-top border-sides">
<div class="text-left">
<span class="font-weight-bold">Selected Product:</span>
<span>Title - Product 2</span>
</div>
</th>
<th>
<div class="text-left">
<span>Title - Product 2</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
<button class="btn btn-primary">View</button>
</td>
<td class="border border-sides">
<button class="btn btn-primary">Buy now</button>
</td>
<td>
<button class="btn btn-primary">View</button>
</td>
</tr>
<tr class="text-left">
<td>Description 1</td>
<td>Y</td>
<td class="border bg-selected border-sides">N</td>
<td>N</td>
</tr>
<tr class="text-left">
<td class="test">Description 2</td>
<td>N</td>
<td class="border border-sides bg-selected">N</td>
<td>N</td>
</tr>
<tr>
<td></td>
<td>
<button class="btn btn-primary">View</button>
</td>
<td class="border border-bottom border-sides">
<button class="btn btn-primary">Buy now</button>
</td>
<td>
<button class="btn btn-primary">View</button>
</td>
</tr>
</tbody>
</table>
</div>
You can add td for your rule, for example td.border-top then it makes it more specific then the BS rule and overrides it
I'm trying to convert from table to bootstrap grid for mobile comparability. Below is an image of both of them on one page but even though they both follow the same css, bootstrap isn't at the center unlike table is. Can someone please explain this to me because this makes no sense.
Thank you
table is at the top and Bootstrap is at the bottom
and here's my HTML
.platinum2 {
color: #FFFFFF;
font-size: 30px;
font-weight: 600;
line-height: 41px;
text-align: center;
}
.package_text {
color: #FFFFFF;
font-family: "lato";
font-size: 14px;
font-weight: 500;
line-height: 26px;
}
.package_price {
color: #FFFFFF;
font-family: "lato";
font-size: 16px;
font-weight: bold;
line-height: 14px;
text-align: center;
}
.glyphicon-star{
font-size: 20px;
}
<div class="row" style="width:50%;margin-left:25% ; margin-bottom:25px; text-align:center">
<h1 class="platinum2">Platinum <br><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /> </h1>
<div class="col-md-6" >
<span class="package_text">Hand Wash<br>Full Interior<br>Complete Vacuum<br>Leather Clean+Shine<br>
<br />
Tire Dressing<br>Tire and Rim Detailing<br>Engine Shampoo<br />
<br /></span>
<span class="package_price"> Cars: $189</span>
</div>
<div class="col-md-6">
<span class="package_text">Roof Liner<br>Full Body Wax<br>Clay Bar Treatment<br>Interior Shampooing<br />
<br />
Complete Detail<br>In & Out Windows<br>Door Jam Cleaning<br />
<br /></span>
<span class="package_price">SUVs: $199</span>
</div>
</div>
</div>
<div class="container" style="background-image:url('/images/StripedBGDetailPackages.png' ); align-items:center; text-align:center; margin-top:25px; padding-top:25px; background-size:100%" >
<table style="width:50%;margin-left:25% ; margin-right:25%; margin-bottom:25px;">
<tr>
<td class="platinum2">Gold</td>
<td class="platinum2">Silver</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
<td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
</tr>
<tr>
<td class="package_text">Hand Wash</td>
<td class="package_text">Hand Wash</td>
</tr>
<tr>
<td class="package_text">Complete Vacuum</td>
<td class="package_text">Clay Bar Treatment</td>
</tr>
<tr>
<td class="package_text">Interior Shampooing</td>
<td class="package_text">Complete Body Wax</td>
</tr>
<tr>
<td class="package_text">Leather Clean+Shine</td>
<td class="package_text">Tire and Rim</td>
</tr>
<tr>
<td class="package_text">Complete Deetail</td>
<td class="package_text">Detailing</td>
</tr>
<tr>
<td class="package_text">In & Out Windows</td>
<td class="package_text">Tire Dressing</td>
</tr>
<tr class="package_text">
<td> </td>
<td> </td>
</tr>
<tr>
<td class="package_price">Cars:$119 SUVs:$129</td>
<td class="package_price">Cars:$99 SUVs:$109</td>
</tr>
</table>
<div class="row" style="width:50%;margin-left:25% ; margin-right:25%; margin-bottom:25px;">
<div class="col-md-6">
<table>
<tr>
<td class="platinum2">Gold</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
</tr>
<tr>
<td class="package_text">Hand Wash</td>
</tr>
<tr>
<td class="package_text">Complete Vacuum</td>
</tr>
<tr>
<td class="package_text">Interior Shampooing</td>
</tr>
<tr>
<td class="package_text">Leather Clean+Shine</td>
</tr>
<tr>
<td class="package_text">Complete Deetail</td>
</tr>
<tr>
<td class="package_text">In & Out Windows</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="package_price">Cars:$119 SUVs:$129</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table>
<tr>
<td class="platinum2">Silver</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
</tr>
<tr>
<td class="package_text">Hand Wash</td>
</tr>
<tr>
<td class="package_text">Clay Bar Treatment</td>
</tr>
<tr>
<td class="package_text">Complete Body Wax</td>
</tr>
<tr><td class="package_text">Tire and Rim</td></tr>
<tr><td class="package_text">Detailing</td></tr>
<tr><td class="package_text">Tire Dressing</td></tr>
<tr><td> </td></tr>
<tr><td class="package_price">Cars:$99 SUVs:$109</td></tr>
</table>
</div>
</div>
To debug, first I added the following since your text are white, and border to everything with 1px solid red color, by doing this it is very easy to see why it is not centered! check the link
body {
background-color: gray;
}
* {
border: 1px solid red;
}
https://jsfiddle.net/dalinhuang/aLpv8k3f/4/
Now, as you can see Gold BS it is in the correct position, that's because
you need only add the following class to your <table class="fullwidth">
.fullwidth {
width: 100%;
}
OK, full solution, remove the debug stuff we added:
https://jsfiddle.net/dalinhuang/aLpv8k3f/5/
Also I think your star are not in the same line, update your .glyphicon-star to add this margin-top: -1px;.
.glyphicon-star {
font-size: 20px;
margin-top: -1px;
}
I would like to create rowspan on my sticky header but can't get it work.
JsFiddle: http://jsfiddle.net/x62v5ea8/1/
What i need is to connect first and second td in 'Header 1'
Can someone help me with this problem ?
HTML
<div class="my-wrapper">
<div class="my-scroller">
<table class="myTable">
<thead>
<tr>
<th class="my-sticky-col">Header 1</th>
<th class="my-sticky-col2">Header 2</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" class="my-sticky-col">A</td>
<td class="my-sticky-col2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="my-sticky-col"> </td>
<td class="my-sticky-col2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="my-sticky-col">C</td>
<td class="my-sticky-col2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
body {
font-size: 1em;
}
.myTable {
border: none;
border-right: solid 1px #DDEFEF;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.myTable thead th {
background-color: #EEE;
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.myTable tbody td {
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.myTable tbody td, .myTable thead th {
border: 1px solid #ccc;
}
.my-wrapper {
position: relative;
}
.my-scroller {
margin-left: 283px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 300px;
}
.myTable .my-sticky-col {
left: 0;
position: absolute;
top: auto;
width: 120px;
}
.myTable .my-sticky-col2 {
border-right: solid 1px #000;
left: 142px;
position: absolute;
width: 120px;
}
Your code is actually working correctly. You are not seeing the rowspan working because the absolute positioning that is used for the sticky header. I updated your JS Fiddle with a few tweeks so you can see what is going on. http://jsfiddle.net/x62v5ea8/2/
You can see in the HTML I commented out the cell that will used by the rowspan and added a .test class with a height and background color so you can see that the cell is now fully expanding. Alternatively you can remove the position: absolute and you see the same results but your header wont be sticky anymore.