I have an HTML table inside a container. On hover, I want to highlight the row, not only inside the table, but extending outside to the edges of the container.
This is my first attempt:
body {
display: flex;
justify-content: center;
}
.container {
display: flex;
justify-content: center;
width: 800px;
border: 1px dotted gray;
padding: 2rem;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 1px dashed purple;
}
td, th {
padding: .25rem;
position: relative;
text-align: left;
}
tr:hover {
background: lightgray;
cursor: pointer;
}
tr:hover td:first-child::before, tr:hover td:last-child::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 2rem;
background-color: lightgray;
}
td:first-child::before {
left: -2rem;
}
td:last-child::after {
right: -2rem;
}
<div class="container">
<table>
<thead>
<th>Dato</th>
<th>Lok. nr.</th>
<th>Navn</th>
<th>Status</th>
</thead>
<tbody>
<tr>
<td>06.12.2016</td>
<td>25736</td>
<td>Josommar-<br>set</td>
<td>I arbeid</td>
</tr>
<tr>
<td>07.12.2016</td>
<td>10232</td>
<td>Mannbru-<br>holmen</td>
<td>Avsluttet</td>
</tr>
</tbody>
</table>
</div>
It works fine in Chrome, but I have to support IE11, and in IE the before and after elements do not have the correct height. You can see the result in the screenshot below.
How can I do this in a way that also works in IE11?
Related
I want to hide the second header when it goes under the first header on small resolution when it scroll, I realy don't know how to do it, I tried everything.
.horizontal-scroll-table > .row::-webkit-scrollbar {
display: none;
background-color: red;
width: 500px;
}
table thead th {
background-color: red;
color: white;
padding: 16px 24px;
}
table thead th:last-child {
border-radius: 0 50px 50px 0;
}
table thead th:first-child {
border-radius: 50px 0 0 50px;
position: sticky !important;
left: 0;
z-index: 999;
}
#media (max-width: 991px) {
.horizontal-scroll-table > .row {
overflow-x: scroll;
white-space: nowrap;
overflow-y: hidden;
}
.horizontal-scroll-table > .row > .col-md-12 {
display: inline-block;
float: none;
}
}
<div class="horizontal-scroll-table">
<div class="row" style="text-align: -webkit-center;">
<table>
<thead class="" style="background-color: #111A40;">
<tr>
<th>Sticky header</th>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
</thead>
</table>
</div>
</div>
here it's an example try to scroll on small size
An interesting use case. I would have completely different approach; would this work for you?
header > div {
display: inline-block;
border: 1px solid red;
width: 120px;
}
header {
white-space: nowrap;
}
/* actual solution */
header > div:nth-of-type(1) {
background: lightpink;
position: sticky;
left: 0;
}
<header>
<div>Sticky</div>
<div>Child1</div>
<div>Child2</div>
<div>Child3</div>
<div>Child4</div>
<div>Child5</div>
<div>Child6</div>
<div>Child7</div>
</header>
There are some strange transparent gaps between columns in a table
Here is css
div.table-container{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 500px;
background-color:colors.$lighter_blue;
position: relative;
div.table-wrapper{
width: 80%;
height: 70%;
padding: 0;
margin: 0 auto;
font-size: 15px;
position: absolute;
overflow: auto;
scrollbar-width: thin; //for FireFox
box-shadow: 0px 0 5px 1px rgb(0 0 0 / 30%);
table.securities-table{
width: 100%;
background-color: white;
border-collapse: separate;
border-spacing: 0;
padding:0;
margin:0;
th,td{
padding: 5px 10px;
}
tbody{
tr:nth-child(odd){
background-color: #f2f2f2;
}
}
th{
color: white;
background-color: colors.$light-blue;
text-align: left;
position: sticky;
top: -1px;
z-index: 1;
}
}
}
}
here is HTML
const securitiesTableHeader = () => {
return (
<thead>
<tr>
{securitiesHeader.map((header,i) =>
<th key={header+i}>{header.headerName}</th>)
}
</tr>
</thead>
);
}
const securitiesTableCols = (row) => {
return (
securitiesHeader.map((header,i) =>
<td key={row[header.value]+"_"+i}>
{getColumnValue(row, header.value)}
</td>)
)
}
const securitiesTableRows= () => {
return (
<tbody>
{
securitiesJSON.map((obj,i) =>
<tr key={"row_"+i}>
{securitiesTableCols(obj)}
</tr>
)}
</tbody>
);
}
return (
<div className = "table-container">
<div className={`table-wrapper`}>
<table className= {`securities-table`}>
{securitiesTableHeader()}
{securitiesTableRows()}
</table>
</div>
</div>
I have tried border-collapse: collapse or separate with border-spacing: 0 but it couldn't remove those "transparent" gaps. Even weirder, those gaps appear and disappear randomly without any specific order/pattern. I only see that in Chrome in mobile view mode in Developer Tools(Chrome inspect) and as far as I know, I didn't see that from Firefox or Edge. I suspect that it is a bug from Chrome but I am quite sure. If anyone has seen this before, I appreciate if you could help me solve this.
div.table-wrapper{
width: 80%;
height: 70%;
padding: 0;
margin: 0 auto;
font-size: 15px;
overflow: auto;
scrollbar-width: thin; //for FireFox
table.securities-table{
width: 100%;
background-color: white;
border-collapse: separate;
border-spacing: 0;
padding:0;
margin:0;
th,td{
padding: 5px;
}
tbody{
tr:nth-child(odd){
background-color: #f2f2f2;
}
}
th{
color: white;
background-color: colors.$light-blue;
text-align: left;
top: -1px;
}
}
}
I have this:
and want this (second column using less space):
Is there a way without introducing absolute values or fixed columns? I don't mind any other hacks like wrappers or invisible columns as long as the content sizes dynamically.
HTML
table {
border-collapse: collapse;
height: 100%;
background-color: blue;
white-space: nowrap;
}
.wrapper {
width: 40%;
font-family: avenir;
height: 100vh;
}
td > div {
color: white;
background-color: darkblue;
padding: 5px;
display: inline-block;
}
td {
padding: 0px;
border: 1px dotted white;
}
.w1px {
width: 1px;
}
.h-100 {
height: 100%;
}
<div class="wrapper">
<table>
<tr>
<td class="w1px"><div>Item1</div></td>
<td><div>Item2</div></td>
<td><div>Item3</div></td>
</tr>
<tr>
<td colspan="3"><div>Item Spanning All Three Above</div></td>
</tr>
<tr>
<td colspan="2"><div>Item Spanning Two</div></td>
</tr>
<tr class="h-100">
</tr>
</table>
</div>
I am a newbie to css.
I have two td in a row of which first has overflow visible. The contents in the first div are overlapping with the second td as in the example below. I wish to make the div css properties like cursor: pointer over the second td. Thus, the div css properties should be on top of the second td.
Please help me with this.
https://jsfiddle.net/jt00uk3e/
Thanks.
table {
width: 0px;
table-layout: fixed;
}
td {
width:50px;
height:50px;
overflow: visible;
}
#td1 {
background-color: red;
}
#td2 {
background-color: green;
}
#div2 {
width: 200px;
height: 20px;
background-color: blue;
cursor: pointer;
}
<table>
<tr>
<td id="td2"><div id="div2"></div></td>
<td id="td1"></td>
</tr>
</table>
Add z-index to div
#div2 {
width: 200px;
height: 20px;
background-color: blue !important;
cursor: pointer;
position:relative;
z-index:
https://jsfiddle.net/jt00uk3e/6/
try this:
table {
width: 0px;
table-layout: fixed;
}
td {
width:50px;
height:50px;
overflow: visible;
}
#td1 {
background-color: red;
}
#td2 {
background-color: green;
}
#div2 {
position:relative;
z-index:1;
width: 200px;
height: 20px;
background-color: blue;
cursor: pointer;
}
<table>
<tr>
<td id="td2"><div id="div2"></div></td>
<td id="td1"></td>
</tr>
</table>
I would like to give the table a margin, that the table is not 100% of the #content div. But the table is bigger than the div(outside).
Here is my fiddle: jsfiddle
HTML code:
</form>
<table>
<tr>
<th>Jobart</th>
<th>Stadteil</th>
<th>Berufsfeld</th>
<th>Title</th>
<th>Vergütung</th>
<th>Gesucht zum(Datum)</th>
<th>Weitere Informationen</th>
</tr>
<tr>
<td>Gelegenheitsjob</td>
<td>Charlottenburg</td>
<td>Bau, Architektur, Vermessung</td>
<td>kl</td>
<td></td>
<td>0000-00-00</td>
<td>Weiter</td>
</tr>
<tr>
<td>Gelegenheitsjob</td>
<td>Charlottenburg</td>
<td>Bau, Architektur, Vermessung</td>
<td>kljlk</td>
<td>78678</td>
<td>2014-12-01</td>
<td>Weiter</td>
</tr>
<tr>
<td>Ausbildungsplatz</td>
<td>Lichtenberg</td>
<td>Gesundheit</td>
<td>kökölkölk</td>
<td>321321</td>
<td>2014-12-23</td>
<td>Weiter</td>
</tr>
<tr>
<td>Praktika</td>
<td>Tempelhof</td>
<td>Technik, Technologiefelder</td>
<td>hallo</td>
<td>1337€</td>
<td>2014-12-25</td>
<td>Weiter</td>
</tr>
<tr>
<td>Praktika</td>
<td>Reinickendorf</td>
<td>Medien</td>
<td>jljlkjljkl</td>
<td>7987987</td>
<td>2014-12-28</td>
<td>Weiter</td>
</tr>
</table>
CSS code:
* {
margin: 0;
padding: 0;
}
body {
background-color: gray;
width: 100%;
}
#header {
background-color: blue;
height: 250px;
width: 100%;
}
nav {
width: 100%;
height: 50px;
background-color: yellow;
}
nav ul {
margin: 0;
}
nav ul li {
list-style: none;
float: left;
display: block;
margin: 8px 0 0 50px;
}
nav a:link {
text-decoration: none;
color: #696969;
font-family: 'Oswald', sans-serif;
font-size: 22px;
}
nav a:visited {
color: #696969;
}
nav a:hover {
color: black;
}
nav a:active {
color: black;
}
#content {
clear: left;
background-color: white;
width: 100%;
height: 100%;
}
form {
padding: 30px;
}
table {
width: 100%;
margin: 30px;
border-collapse: collapse;
/*border-spacing: 8px;*/
}
table tr:nth-of-type(odd) td {
background-color: gray;
}
th {
background-color: #8dc043;
height: 50px;
border: 1px solid #578415;
}
tr {
border: 1px solid #578415;
}
td {
border: 1px solid #578415;
padding: 8px;
}
fieldset {
padding: 15px;
}
footer {
border: 1px solid red;
background-color: green;
height: 50px;
}
footer ul {
margin: 15px 0 0 0;
}
footer ul li {
list-style: none;
float: left;
display: block;
margin: 0 0 0 50px;
}
#wrapper {
margin: 0 auto;
width: 85%;
}
Hope, that somebody can help me!
The problem is that in your example the padding: 30px of your table is added to width: 100% which results in more than 100% of total width;
Example 1: Using percentages on table
HTML
<table>
...
</table>
CSS
table {
margin: 3%;
width: 94%;
}
Example 2 Using wrapper around table for pixelvalues
HTML
<div class="tablemargin">
<table>
...
</table>
</div>
CSS
.tablemargin {
margin: 30px; /*sets margin around the table*/
}
table {
width: 100%;
margin: 0; /*set margin to 0 or remove this property completely*/
}
You can use pixel size as well as percentages. 50px is 50 pixels. It would be like this:
nav {
width: 100px;
height: 50px;
background-color: yellow;
}