First of all, there are indeed multiple similar questions but they are not working in my case. Related, Other related
The structure is like page > div > div > stuff + table
I am using Gridstack.js and here is my current code
$('.grid-stack').gridstack();
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" />
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js'></script>
<body>
<div class="grid-stack">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="10" data-gs-height="2">
<div class="grid-stack-item-content">
<h3>Title</h3>
<div>
<input type="text">
</div>
<div>
<button>Button A</button>
<button>Button B</button>
</div>
<div>
<a>Link A</a>
<a>Link B</a>
</div>
<table>
<thead>
<tr>
<th>ColA</th>
<th>ColB</th>
<th>ColC</th>
<th>ColD</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mauritius</td>
<td>Castor</td>
<td>F14 3QF</td>
<td>dignissim.pharetra#aliquetmolestietellus.net</td>
</tr>
<tr>
<td>Guyana</td>
<td>Inuvik</td>
<td>67752</td>
<td>Nam.porttitor#sitamet.edu</td>
</tr>
<tr>
<td>Norfolk Island</td>
<td>Sparwood</td>
<td>10899-987</td>
<td>in.consectetuer#ametmetusAliquam.net</td>
</tr>
<tr>
<td>Afghanistan</td>
<td>Sant'Urbano</td>
<td>7142</td>
<td>lectus.convallis#ornareIn.co.uk</td>
</tr>
<tr>
<td>Macao</td>
<td>Bon Accord</td>
<td>16-568</td>
<td>auctor.velit.Aliquam#consectetuerrhoncus.edu</td>
</tr>
<tr>
<td>Philippines</td>
<td>Anghiari</td>
<td>280294</td>
<td>neque.vitae#eu.org</td>
</tr>
<tr>
<td>Bangladesh</td>
<td>Falciano del Massico</td>
<td>90856</td>
<td>id#vitae.edu</td>
</tr>
<tr>
<td>Micronesia</td>
<td>Divinópolis</td>
<td>45-520</td>
<td>scelerisque.neque#vitaesemper.co.uk</td>
</tr>
<tr>
<td>Antigua and Barbuda</td>
<td>Dudzele</td>
<td>728363</td>
<td>dignissim.tempor.arcu#vulputate.net</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Joué-lès-Tours</td>
<td>958173</td>
<td>amet#eleifendnondapibus.net</td>
</tr>
<tr>
<td>Hong Kong</td>
<td>Gateshead</td>
<td>83548-761</td>
<td>fringilla.purus#enimnec.com</td>
</tr>
<tr>
<td>Iran</td>
<td>Minto</td>
<td>80622</td>
<td>adipiscing.ligula#fringillaDonec.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Whitby</td>
<td>59472</td>
<td>ante#anteNunc.org</td>
</tr>
<tr>
<td>Korea, South</td>
<td>Montpelier</td>
<td>L8 2TT</td>
<td>a#sagittisDuisgravida.org</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Dokkum</td>
<td>205204</td>
<td>sed.libero#convallisest.co.uk</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Maisires</td>
<td>9279</td>
<td>ultrices.posuere.cubilia#sem.org</td>
</tr>
<tr>
<td>Panama</td>
<td>Rankweil</td>
<td>30910</td>
<td>elit.fermentum#odio.org</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Melsele</td>
<td>23428</td>
<td>sed.libero.Proin#nequevitaesemper.com</td>
</tr>
<tr>
<td>Cuba</td>
<td>Wolvertem</td>
<td>93687-468</td>
<td>auctor.odio#pellentesqueafacilisis.edu</td>
</tr>
<tr>
<td>Indonesia</td>
<td>Rothesay</td>
<td>919761</td>
<td>augue.scelerisque#asollicitudin.com</td>
</tr>
<tr>
<td>Japan</td>
<td>Inuvik</td>
<td>2899</td>
<td>massa.non#ligulaDonecluctus.org</td>
</tr>
<tr>
<td>Mauritius</td>
<td>Zeitz</td>
<td>603912</td>
<td>consequat#diamPellentesquehabitant.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Lincoln</td>
<td>11148</td>
<td>tristique.neque#Nullamlobortis.org</td>
</tr>
<tr>
<td>Swaziland</td>
<td>Newtown</td>
<td>9616</td>
<td>ipsum#sapien.ca</td>
</tr>
<tr>
<td>Brazil</td>
<td>Rodì Milici</td>
<td>861316</td>
<td>fames#variusultricesmauris.ca</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Current behavior
While scrolling inside the div there is nothing special, you will first scroll thought the input, links,... then though the table
Expected behavior
While scrolling, when the header hits the top of the div - the header should be fixed on the top of the div (Not the top of the page). When scrolled back, the header should go back to its normal state.
There is no need to check for the end of the div to hide the header. The end of the div will always be the end of the table.
How can this be achieved ? The header should not be fixed to the top of the page but the top of the div
Note: this should work for IE11 also
Add style for your table
table thead tr:nth-child(1) th{
background: RED;
position: sticky;
top: 0;
z-index: 10;
}
support of sticky
$('.grid-stack').gridstack();
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
table thead tr:nth-child(1) th{
background: RED;
position: sticky;
top: 0;
z-index: 10;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" />
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js'></script>
<body>
<div class="grid-stack">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="10" data-gs-height="2">
<div class="grid-stack-item-content">
<h3>Title</h3>
<div>
<input type="text">
</div>
<div>
<button>Button A</button>
<button>Button B</button>
</div>
<div>
<a>Link A</a>
<a>Link B</a>
</div>
<table>
<thead>
<tr>
<th>ColA</th>
<th>ColB</th>
<th>ColC</th>
<th>ColD</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mauritius</td>
<td>Castor</td>
<td>F14 3QF</td>
<td>dignissim.pharetra#aliquetmolestietellus.net</td>
</tr>
<tr>
<td>Guyana</td>
<td>Inuvik</td>
<td>67752</td>
<td>Nam.porttitor#sitamet.edu</td>
</tr>
<tr>
<td>Norfolk Island</td>
<td>Sparwood</td>
<td>10899-987</td>
<td>in.consectetuer#ametmetusAliquam.net</td>
</tr>
<tr>
<td>Afghanistan</td>
<td>Sant'Urbano</td>
<td>7142</td>
<td>lectus.convallis#ornareIn.co.uk</td>
</tr>
<tr>
<td>Macao</td>
<td>Bon Accord</td>
<td>16-568</td>
<td>auctor.velit.Aliquam#consectetuerrhoncus.edu</td>
</tr>
<tr>
<td>Philippines</td>
<td>Anghiari</td>
<td>280294</td>
<td>neque.vitae#eu.org</td>
</tr>
<tr>
<td>Bangladesh</td>
<td>Falciano del Massico</td>
<td>90856</td>
<td>id#vitae.edu</td>
</tr>
<tr>
<td>Micronesia</td>
<td>Divinópolis</td>
<td>45-520</td>
<td>scelerisque.neque#vitaesemper.co.uk</td>
</tr>
<tr>
<td>Antigua and Barbuda</td>
<td>Dudzele</td>
<td>728363</td>
<td>dignissim.tempor.arcu#vulputate.net</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Joué-lès-Tours</td>
<td>958173</td>
<td>amet#eleifendnondapibus.net</td>
</tr>
<tr>
<td>Hong Kong</td>
<td>Gateshead</td>
<td>83548-761</td>
<td>fringilla.purus#enimnec.com</td>
</tr>
<tr>
<td>Iran</td>
<td>Minto</td>
<td>80622</td>
<td>adipiscing.ligula#fringillaDonec.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Whitby</td>
<td>59472</td>
<td>ante#anteNunc.org</td>
</tr>
<tr>
<td>Korea, South</td>
<td>Montpelier</td>
<td>L8 2TT</td>
<td>a#sagittisDuisgravida.org</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Dokkum</td>
<td>205204</td>
<td>sed.libero#convallisest.co.uk</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Maisires</td>
<td>9279</td>
<td>ultrices.posuere.cubilia#sem.org</td>
</tr>
<tr>
<td>Panama</td>
<td>Rankweil</td>
<td>30910</td>
<td>elit.fermentum#odio.org</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Melsele</td>
<td>23428</td>
<td>sed.libero.Proin#nequevitaesemper.com</td>
</tr>
<tr>
<td>Cuba</td>
<td>Wolvertem</td>
<td>93687-468</td>
<td>auctor.odio#pellentesqueafacilisis.edu</td>
</tr>
<tr>
<td>Indonesia</td>
<td>Rothesay</td>
<td>919761</td>
<td>augue.scelerisque#asollicitudin.com</td>
</tr>
<tr>
<td>Japan</td>
<td>Inuvik</td>
<td>2899</td>
<td>massa.non#ligulaDonecluctus.org</td>
</tr>
<tr>
<td>Mauritius</td>
<td>Zeitz</td>
<td>603912</td>
<td>consequat#diamPellentesquehabitant.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Lincoln</td>
<td>11148</td>
<td>tristique.neque#Nullamlobortis.org</td>
</tr>
<tr>
<td>Swaziland</td>
<td>Newtown</td>
<td>9616</td>
<td>ipsum#sapien.ca</td>
</tr>
<tr>
<td>Brazil</td>
<td>Rodì Milici</td>
<td>861316</td>
<td>fames#variusultricesmauris.ca</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
It can be done with CSS position: fixed and jQuery script. Check out the snippet below or JSFiddle.
$('.grid-stack').gridstack();
$('thead th').each(function(index) {
$('.fixed-header th').eq(index).css('width', $(this).width());
});
$('.fixed-header-container').height($('.fixed-header').height());
$('.fixed-header-container').hide();
$('.grid-stack-item-content').scroll(function() {
var $table = $('.content-table');
if ($table.offset().top >= 0) {
$('.fixed-header-container').hide();
} else if ($table.offset().top < 0) {
$('.fixed-header-container').show();
}
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
.fixed-header {
position: fixed;
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" rel="stylesheet" />
<div class="grid-stack">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="10" data-gs-height="2">
<div class="grid-stack-item-content fixed-header-container" style="z-index: 1 !important;">
<table class="fixed-header">
<tr>
<th>ColA</th>
<th>ColB</th>
<th>ColC</th>
<th>ColD</th>
</tr>
</table>
</div>
<div class="grid-stack-item-content">
<div>
<h3>Title</h3>
<input type="text">
<div>
<button>Button A</button>
<button>Button B</button>
</div>
<div>
<a>Link A</a>
<a>Link B</a>
</div>
</div>
<table class="content-table">
<thead>
<tr>
<th>ColA</th>
<th>ColB</th>
<th>ColC</th>
<th>ColD</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mauritius</td>
<td>Castor</td>
<td>F14 3QF</td>
<td>dignissim.pharetra#aliquetmolestietellus.net</td>
</tr>
<tr>
<td>Guyana</td>
<td>Inuvik</td>
<td>67752</td>
<td>Nam.porttitor#sitamet.edu</td>
</tr>
<tr>
<td>Norfolk Island</td>
<td>Sparwood</td>
<td>10899-987</td>
<td>in.consectetuer#ametmetusAliquam.net</td>
</tr>
<tr>
<td>Afghanistan</td>
<td>Sant'Urbano</td>
<td>7142</td>
<td>lectus.convallis#ornareIn.co.uk</td>
</tr>
<tr>
<td>Macao</td>
<td>Bon Accord</td>
<td>16-568</td>
<td>auctor.velit.Aliquam#consectetuerrhoncus.edu</td>
</tr>
<tr>
<td>Philippines</td>
<td>Anghiari</td>
<td>280294</td>
<td>neque.vitae#eu.org</td>
</tr>
<tr>
<td>Bangladesh</td>
<td>Falciano del Massico</td>
<td>90856</td>
<td>id#vitae.edu</td>
</tr>
<tr>
<td>Micronesia</td>
<td>Divinópolis</td>
<td>45-520</td>
<td>scelerisque.neque#vitaesemper.co.uk</td>
</tr>
<tr>
<td>Antigua and Barbuda</td>
<td>Dudzele</td>
<td>728363</td>
<td>dignissim.tempor.arcu#vulputate.net</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Joué-lès-Tours</td>
<td>958173</td>
<td>amet#eleifendnondapibus.net</td>
</tr>
<tr>
<td>Hong Kong</td>
<td>Gateshead</td>
<td>83548-761</td>
<td>fringilla.purus#enimnec.com</td>
</tr>
<tr>
<td>Iran</td>
<td>Minto</td>
<td>80622</td>
<td>adipiscing.ligula#fringillaDonec.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Whitby</td>
<td>59472</td>
<td>ante#anteNunc.org</td>
</tr>
<tr>
<td>Korea, South</td>
<td>Montpelier</td>
<td>L8 2TT</td>
<td>a#sagittisDuisgravida.org</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Dokkum</td>
<td>205204</td>
<td>sed.libero#convallisest.co.uk</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Maisires</td>
<td>9279</td>
<td>ultrices.posuere.cubilia#sem.org</td>
</tr>
<tr>
<td>Panama</td>
<td>Rankweil</td>
<td>30910</td>
<td>elit.fermentum#odio.org</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Melsele</td>
<td>23428</td>
<td>sed.libero.Proin#nequevitaesemper.com</td>
</tr>
<tr>
<td>Cuba</td>
<td>Wolvertem</td>
<td>93687-468</td>
<td>auctor.odio#pellentesqueafacilisis.edu</td>
</tr>
<tr>
<td>Indonesia</td>
<td>Rothesay</td>
<td>919761</td>
<td>augue.scelerisque#asollicitudin.com</td>
</tr>
<tr>
<td>Japan</td>
<td>Inuvik</td>
<td>2899</td>
<td>massa.non#ligulaDonecluctus.org</td>
</tr>
<tr>
<td>Mauritius</td>
<td>Zeitz</td>
<td>603912</td>
<td>consequat#diamPellentesquehabitant.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Lincoln</td>
<td>11148</td>
<td>tristique.neque#Nullamlobortis.org</td>
</tr>
<tr>
<td>Swaziland</td>
<td>Newtown</td>
<td>9616</td>
<td>ipsum#sapien.ca</td>
</tr>
<tr>
<td>Brazil</td>
<td>Rodì Milici</td>
<td>861316</td>
<td>fames#variusultricesmauris.ca</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Related
I have an HTML table with a sticky header, where the sticky property is set on the th elements.
I want to apply a box-shadow with a blur, but doing so causes the shadow to leak / bleed on the sides of each element.
I have created a CodePen that demonstrates the problem, and where the desired shadow is visible below the elements.
I have tried adding a spread parameter as box-shadow: 0px 5px 7px rgba(9, 30, 66, 0.08);, which will solve the issue with the side-shadows but that instead causes the shadow the separate from each other below them.
Is it possible to create a box-shadow that only is directed in the down direction, and is seamless with sibling box shadows?
Since it's not possible to apply position: sticky; to thead or tr your best bet would be to fake the box-shadow on the th elements by using an absolutely positioned pseudo element + linear-gradient. Here's an example:
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
th, td {
padding: 0.25rem;
}
th {
background: white;
position: sticky;
top: 0;
}
th::after {
content: '';
position: absolute;
bottom: -6px;
right: 0;
left: 0;
height: 6px;
background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Job</th>
<th>Color</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
<td>At.</td>
<td>Quis.</td>
</tr>
<tr>
<td>Quas!</td>
<td>Velit.</td>
<td>Quisquam?</td>
<td>Rerum?</td>
<td>Iusto?</td>
</tr>
<tr>
<td>Voluptates!</td>
<td>Fugiat?</td>
<td>Alias.</td>
<td>Doloribus.</td>
<td>Veritatis.</td>
</tr>
<tr>
<td>Maiores.</td>
<td>Ab.</td>
<td>Accusantium.</td>
<td>Ullam!</td>
<td>Eveniet.</td>
</tr>
<tr>
<td>Hic.</td>
<td>Id!</td>
<td>Officiis.</td>
<td>Modi!</td>
<td>Obcaecati.</td>
</tr>
<tr>
<td>Soluta.</td>
<td>Ad!</td>
<td>Impedit.</td>
<td>Alias!</td>
<td>Ad.</td>
</tr>
<tr>
<td>Expedita.</td>
<td>Quo.</td>
<td>Exercitationem!</td>
<td>Optio?</td>
<td>Ipsum?</td>
</tr>
<tr>
<td>Commodi!</td>
<td>Rem.</td>
<td>Aspernatur.</td>
<td>Accusantium!</td>
<td>Maiores.</td>
</tr>
<tr>
<td>Omnis.</td>
<td>Cumque?</td>
<td>Eveniet!</td>
<td>Mollitia?</td>
<td>Vero.</td>
</tr>
<tr>
<td>Error!</td>
<td>Inventore.</td>
<td>Quasi!</td>
<td>Ducimus.</td>
<td>Repudiandae!</td>
</tr>
<tr>
<td>Dolores!</td>
<td>Necessitatibus.</td>
<td>Corrupti!</td>
<td>Eum.</td>
<td>Sunt!</td>
</tr>
<tr>
<td>Ea.</td>
<td>Culpa?</td>
<td>Quam?</td>
<td>Nemo!</td>
<td>Sit!</td>
</tr>
<tr>
<td>Veritatis!</td>
<td>Facilis.</td>
<td>Expedita?</td>
<td>Ipsam!</td>
<td>Omnis!</td>
</tr>
<tr>
<td>Vitae.</td>
<td>Cumque.</td>
<td>Repudiandae.</td>
<td>Ut?</td>
<td>Sed!</td>
</tr>
<tr>
<td>Accusantium.</td>
<td>Adipisci.</td>
<td>Sit.</td>
<td>Maxime.</td>
<td>Harum.</td>
</tr>
<tr>
<td>Qui!</td>
<td>Accusamus?</td>
<td>Minima?</td>
<td>Dolorum.</td>
<td>Molestiae.</td>
</tr>
<tr>
<td>Vero!</td>
<td>Voluptatum?</td>
<td>Ea?</td>
<td>Odit!</td>
<td>A.</td>
</tr>
<tr>
<td>Debitis.</td>
<td>Veniam.</td>
<td>Fuga.</td>
<td>Alias!</td>
<td>Recusandae!</td>
</tr>
<tr>
<td>Aperiam!</td>
<td>Dolorum.</td>
<td>Enim.</td>
<td>Sapiente!</td>
<td>Suscipit?</td>
</tr>
<tr>
<td>Consequuntur.</td>
<td>Doloremque.</td>
<td>Illum!</td>
<td>Iste!</td>
<td>Sint!</td>
</tr>
<tr>
<td>Facilis.</td>
<td>Error.</td>
<td>Fugiat.</td>
<td>At.</td>
<td>Modi?</td>
</tr>
<tr>
<td>Voluptatibus!</td>
<td>Alias.</td>
<td>Eaque.</td>
<td>Cum.</td>
<td>Ducimus!</td>
</tr>
<tr>
<td>Nihil.</td>
<td>Enim.</td>
<td>Earum?</td>
<td>Nobis?</td>
<td>Eveniet.</td>
</tr>
<tr>
<td>Eum!</td>
<td>Id?</td>
<td>Molestiae.</td>
<td>Velit.</td>
<td>Minima.</td>
</tr>
<tr>
<td>Sapiente?</td>
<td>Neque.</td>
<td>Obcaecati!</td>
<td>Earum.</td>
<td>Esse.</td>
</tr>
<tr>
<td>Nam?</td>
<td>Ipsam!</td>
<td>Provident.</td>
<td>Ullam.</td>
<td>Quae?</td>
</tr>
<tr>
<td>Amet!</td>
<td>In.</td>
<td>Officia!</td>
<td>Natus?</td>
<td>Tempore?</td>
</tr>
<tr>
<td>Consequatur.</td>
<td>Hic.</td>
<td>Officia.</td>
<td>Itaque?</td>
<td>Quasi.</td>
</tr>
<tr>
<td>Enim.</td>
<td>Tenetur.</td>
<td>Asperiores?</td>
<td>Eos!</td>
<td>Libero.</td>
</tr>
<tr>
<td>Exercitationem.</td>
<td>Quidem!</td>
<td>Beatae?</td>
<td>Adipisci?</td>
<td>Accusamus.</td>
</tr>
<tr>
<td>Omnis.</td>
<td>Accusamus?</td>
<td>Eius!</td>
<td>Recusandae!</td>
<td>Dolor.</td>
</tr>
<tr>
<td>Magni.</td>
<td>Temporibus!</td>
<td>Odio!</td>
<td>Odit!</td>
<td>Voluptatum?</td>
</tr>
<tr>
<td>Eum.</td>
<td>Animi!</td>
<td>Labore.</td>
<td>Alias!</td>
<td>Fuga.</td>
</tr>
<tr>
<td>Quia!</td>
<td>Quis.</td>
<td>Neque?</td>
<td>Illo.</td>
<td>Ad.</td>
</tr>
<tr>
<td>Officiis.</td>
<td>Exercitationem!</td>
<td>Adipisci?</td>
<td>Officiis?</td>
<td>In?</td>
</tr>
<tr>
<td>Voluptates?</td>
<td>Voluptatum.</td>
<td>Nihil.</td>
<td>Totam?</td>
<td>Quisquam!</td>
</tr>
<tr>
<td>Soluta.</td>
<td>Tempore!</td>
<td>Cupiditate.</td>
<td>Beatae.</td>
<td>Perspiciatis.</td>
</tr>
<tr>
<td>Porro.</td>
<td>Officia?</td>
<td>Error.</td>
<td>Culpa?</td>
<td>Fugit.</td>
</tr>
<tr>
<td>Et?</td>
<td>Nemo.</td>
<td>Nisi?</td>
<td>Totam!</td>
<td>Voluptate.</td>
</tr>
<tr>
<td>Saepe?</td>
<td>Vero.</td>
<td>Amet?</td>
<td>Illo!</td>
<td>Laborum!</td>
</tr>
<tr>
<td>Atque!</td>
<td>Tenetur.</td>
<td>Optio.</td>
<td>Iure.</td>
<td>Porro.</td>
</tr>
<tr>
<td>Atque.</td>
<td>Alias.</td>
<td>Doloremque.</td>
<td>Velit.</td>
<td>Culpa.</td>
</tr>
<tr>
<td>Placeat?</td>
<td>Necessitatibus.</td>
<td>Voluptate!</td>
<td>Possimus.</td>
<td>Nam?</td>
</tr>
<tr>
<td>Illum!</td>
<td>Quae.</td>
<td>Expedita!</td>
<td>Omnis.</td>
<td>Nam.</td>
</tr>
<tr>
<td>Consequuntur!</td>
<td>Consectetur!</td>
<td>Provident!</td>
<td>Consequuntur!</td>
<td>Distinctio.</td>
</tr>
<tr>
<td>Aperiam!</td>
<td>Voluptatem.</td>
<td>Cupiditate!</td>
<td>Quae.</td>
<td>Praesentium.</td>
</tr>
<tr>
<td>Possimus?</td>
<td>Qui.</td>
<td>Consequuntur.</td>
<td>Deleniti.</td>
<td>Voluptas.</td>
</tr>
<tr>
<td>Hic?</td>
<td>Ab.</td>
<td>Asperiores?</td>
<td>Omnis.</td>
<td>Animi!</td>
</tr>
<tr>
<td>Cupiditate.</td>
<td>Velit.</td>
<td>Libero.</td>
<td>Iste.</td>
<td>Dicta?</td>
</tr>
<tr>
<td>Consequatur!</td>
<td>Nobis.</td>
<td>Aperiam!</td>
<td>Odio.</td>
<td>Nemo!</td>
</tr>
<tr>
<td>Dolorem.</td>
<td>Distinctio?</td>
<td>Provident?</td>
<td>Nisi!</td>
<td>Impedit?</td>
</tr>
<tr>
<td>Accusantium?</td>
<td>Ea.</td>
<td>Doloribus.</td>
<td>Nobis.</td>
<td>Maxime?</td>
</tr>
<tr>
<td>Molestiae.</td>
<td>Rem?</td>
<td>Enim!</td>
<td>Maxime?</td>
<td>Reiciendis!</td>
</tr>
<tr>
<td>Commodi.</td>
<td>At.</td>
<td>Earum?</td>
<td>Fugit.</td>
<td>Maxime?</td>
</tr>
<tr>
<td>Eligendi?</td>
<td>Quis.</td>
<td>Error?</td>
<td>Atque.</td>
<td>Perferendis.</td>
</tr>
<tr>
<td>Quidem.</td>
<td>Odit!</td>
<td>Tempore.</td>
<td>Voluptates.</td>
<td>Facere!</td>
</tr>
<tr>
<td>Repudiandae!</td>
<td>Accusamus?</td>
<td>Soluta.</td>
<td>Incidunt.</td>
<td>Aliquid?</td>
</tr>
<tr>
<td>Quisquam?</td>
<td>Eius.</td>
<td>Obcaecati?</td>
<td>Maxime.</td>
<td>Nihil.</td>
</tr>
<tr>
<td>Minus.</td>
<td>Magni?</td>
<td>Necessitatibus?</td>
<td>Asperiores.</td>
<td>Iure.</td>
</tr>
<tr>
<td>Ipsa!</td>
<td>Temporibus.</td>
<td>Non!</td>
<td>Dolore.</td>
<td>Veritatis.</td>
</tr>
<tr>
<td>Ea!</td>
<td>Officia?</td>
<td>Doloribus?</td>
<td>Deleniti?</td>
<td>Dolorem!</td>
</tr>
<tr>
<td>Sequi?</td>
<td>Molestias!</td>
<td>Nesciunt.</td>
<td>Qui.</td>
<td>Doloribus?</td>
</tr>
<tr>
<td>Id.</td>
<td>Enim?</td>
<td>Quam!</td>
<td>Sunt!</td>
<td>Consequuntur.</td>
</tr>
<tr>
<td>Reprehenderit?</td>
<td>Ut?</td>
<td>Veritatis!</td>
<td>Corporis!</td>
<td>Ipsa.</td>
</tr>
<tr>
<td>Blanditiis!</td>
<td>Veniam!</td>
<td>Tenetur.</td>
<td>Eos?</td>
<td>Repellat!</td>
</tr>
<tr>
<td>Enim?</td>
<td>Atque!</td>
<td>Aspernatur?</td>
<td>Fugit.</td>
<td>Voluptatibus!</td>
</tr>
<tr>
<td>Nihil.</td>
<td>Distinctio!</td>
<td>Aut!</td>
<td>Rerum!</td>
<td>Dolorem?</td>
</tr>
<tr>
<td>Inventore!</td>
<td>Hic.</td>
<td>Explicabo.</td>
<td>Sit.</td>
<td>A.</td>
</tr>
<tr>
<td>Inventore.</td>
<td>A.</td>
<td>Nam.</td>
<td>Beatae.</td>
<td>Consequatur.</td>
</tr>
<tr>
<td>Eligendi.</td>
<td>Illum.</td>
<td>Enim?</td>
<td>Dignissimos!</td>
<td>Ducimus?</td>
</tr>
<tr>
<td>Eligendi!</td>
<td>Fugiat?</td>
<td>Deleniti!</td>
<td>Rerum?</td>
<td>Delectus?</td>
</tr>
<tr>
<td>Sit.</td>
<td>Nam.</td>
<td>Eveniet?</td>
<td>Veritatis.</td>
<td>Adipisci!</td>
</tr>
<tr>
<td>Nostrum?</td>
<td>Totam?</td>
<td>Voluptates!</td>
<td>Ab!</td>
<td>Consequatur.</td>
</tr>
<tr>
<td>Error!</td>
<td>Dicta?</td>
<td>Voluptatum?</td>
<td>Corporis!</td>
<td>Ea.</td>
</tr>
<tr>
<td>Vel.</td>
<td>Asperiores.</td>
<td>Facere.</td>
<td>Quae.</td>
<td>Fugiat.</td>
</tr>
<tr>
<td>Libero?</td>
<td>Molestias.</td>
<td>Praesentium!</td>
<td>Accusantium!</td>
<td>Tenetur.</td>
</tr>
<tr>
<td>Eveniet.</td>
<td>Quam.</td>
<td>Quibusdam.</td>
<td>Eaque?</td>
<td>Dolore!</td>
</tr>
<tr>
<td>Asperiores.</td>
<td>Impedit.</td>
<td>Ullam?</td>
<td>Quod.</td>
<td>Placeat.</td>
</tr>
<tr>
<td>In?</td>
<td>Aliquid.</td>
<td>Voluptatum!</td>
<td>Omnis?</td>
<td>Magni.</td>
</tr>
<tr>
<td>Autem.</td>
<td>Earum!</td>
<td>Debitis!</td>
<td>Eius.</td>
<td>Incidunt.</td>
</tr>
<tr>
<td>Blanditiis?</td>
<td>Impedit.</td>
<td>Libero?</td>
<td>Reiciendis!</td>
<td>Tempore.</td>
</tr>
<tr>
<td>Quasi.</td>
<td>Reiciendis.</td>
<td>Aut?</td>
<td>Architecto?</td>
<td>Vero!</td>
</tr>
<tr>
<td>Fuga!</td>
<td>Illum!</td>
<td>Tenetur!</td>
<td>Vitae.</td>
<td>Natus.</td>
</tr>
</tbody>
</table>
The first row of table "tabid" is selected as intended. However the first line of the second table is also selected, which I do not want.
table#tabid tr:first-of-type {
background-color: yellow;
}
<table id="tabid">
<tbody>
<tr>
<td>Select me</td>
<td>cell-112</td>
<td>cell-113</td>
</tr>
<tr>
<td>cell-121</td>
<td>cell-122</td>
<td>cell-123</td>
</tr>
<tr>
<td>cell-131</td>
<td>Cell-132</td>
<td>Cell-133</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>, but not me</td>
<td>cell-141-1</td>
<td>cell-141-1</td>
<td>cell-141-1</td>
</tr>
</tbody>
</table>
</td>
<td>cell-142</td>
<td>cell-143</td>
</tr>
</tbody>
</table>
You can use the child combinator, > like:
table#tabid > tbody > tr:first-of-type {
background-color: yellow;
}
table#tabid > tbody > tr:first-of-type {
background-color: yellow;
}
<table id="tabid">
<tbody>
<tr>
<td>Select me</td>
<td>cell-112</td>
<td>cell-113</td>
</tr>
<tr>
<td>cell-121</td>
<td>cell-122</td>
<td>cell-123</td>
</tr>
<tr>
<td>cell-131</td>
<td>Cell-132</td>
<td>Cell-133</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>, but not me</td>
<td>cell-141-1</td>
<td>cell-141-1</td>
<td>cell-141-1</td>
</tr>
</tbody>
</table>
</td>
<td>cell-142</td>
<td>cell-143</td>
</tr>
</tbody>
</table>
Use child selector >
table#tabid > tbody > tr:first-of-type {
background-color: yellow;
}
Result
table#tabid>tbody>tr:first-of-type {
background-color: yellow;
}
<table id="tabid">
<tbody>
<tr>
<td>Select me</td>
<td>cell-112</td>
<td>cell-113</td>
</tr>
<tr>
<td>cell-121</td>
<td>cell-122</td>
<td>cell-123</td>
</tr>
<tr>
<td>cell-131</td>
<td>Cell-132</td>
<td>Cell-133</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>, but not me</td>
<td>cell-141-1</td>
<td>cell-141-1</td>
<td>cell-141-1</td>
</tr>
</tbody>
</table>
</td>
<td>cell-142</td>
<td>cell-143</td>
</tr>
</tbody>
</table>
I have a simple table structure.
table > tbody > tr > td{
text-align:center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
C 1
</td>
</tr>
<tr>
<td class="col-md-4">
Client 2
</td>
</tr>
</tbody>
</table>
The question is : How can I align td-s content left and center. ?
The output should be something like this :
If you are wanting the lower cells to be left justified from the centre, then just add padding-left 50% to your body cells
.table tbody td {
padding-left: 50%;
text-align;
left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" />
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
C 1
</td>
</tr>
<tr>
<td class="col-md-4">
Client 2
</td>
</tr>
</tbody>
</table>
If you want them centred to the largest word, then left-aligned, you cannot have separate rows for the tbody, you would need to wrap all the words in an inline block div:
.col-md-4 {
text-align: center;
}
.inline-block {
display: inline-block;
text-align: left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" />
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
<div class="inline-block">
C 1<br> Client 2
</div>
</td>
</tr>
</tbody>
</table>
Try this:
td {
width: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
C 1
</td>
</tr>
<tr>
<td>
</td>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
If you can't add extra table-cells you could use padding:
.table tbody td {
padding-left: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td>
C 1
</td>
</tr>
<tr>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
td {
width: 50%;
}
td:last-child {
border-left:1px solid #333;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
C 1
</td>
</tr>
<tr>
<td>
</td>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
Try colspan="<number of columns to merge>" and rowspan="<number of rows to merge>" to merge row or column:
<table>
<thead>
<tr>
<td colspan="2" align="center">Client</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" width="50%"></td>
<td>
C 1
</td>
</tr>
<tr>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
I have a question
If i put :
<table>
<tr>
<th class="width100px"></th>
</tr>
<tr>
<td></td>
</tr>
</table>
width100px = width: 100px
Does <td> takes the same characteristics as <th>?
If you mean by using inline styles then yes.
take a look :
th {
/*demo styles*/
background: red;
height: 100px;
}
.width100px {
width: 100px
}
<h3>CSS Classes</h3>
<table>
<tr>
<th class="width100px"></th>
</tr>
<tr>
<td></td>
</tr>
</table>
<hr />
<h3>CSS inline styles</h3>
<table>
<tr>
<th style="width:100px"></th>
</tr>
<tr>
<td></td>
</tr>
</table>
<hr />
<h3>HTML old width tag - deprecated, don't use unless for email purposes</h3>
<table>
<tr>
<th width="100"></th>
</tr>
<tr>
<td></td>
</tr>
</table>
So I want to remove the extra spaces highlighted in red ink shown here:
http://i.stack.imgur.com/d7Kwo.png
When I remove the top images the table width becomes correct: 800px
but what I wanted is this:http://i.stack.imgur.com/XPsz2.jpg
Here is my current code:
<html>
<head><title>Adventure</title>
<link rel="stylesheet" type="text/css" href="STYLE04.css">
</head>
<body>
<table style="width:800px; height:600px" >
<tr>
<td colspan=3><img src="N13BANNER.PNG"></td>
<td><img src="N13LOGO.PNG"></td>
</tr>
<tr>
<td style="width:176px"><img src="N13BUTTON1.PNG"></td>
<td width=176><img src="N13IMG5.jpg"></td>
<td colspan=2 rowspan=6><img src="DUNE204.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON2.PNG"></td>
<td width=176><img src="N13IMG1.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON3.PNG"></td>
<td width=176><img src="N13IMG4.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON4.PNG"></td>
<td width=176><img src="N13IMG9.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON5.PNG"></td>
<td width=176><img src="N13IMG6.jpg"></td>
</tr>
<tr>
<td colspan=2><h1>Webpage last edited by asdf</h1></td>
</tr>
</table>
</body>
</html>
Code sample, with an update of your table layout without the images.
Is this how you want? ... then your images is to big, and pushes the cells too wide.
table {
width: 800px;
}
td {
background-color: gray;
width: 20%;
height: 85px;
}
tr:last-child td {
height: 40px;
}
img {
vertical-align: top;
}
<table>
<tr>
<td colspan=4></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan=3 rowspan=6></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>mail</td>
<td>mail</td>
</tr>
<tr>
<td colspan=2>Webpage last edited by asdf</td>
</tr>
</table>