clicked hover bug (chrome) - html

When applying :hover-attributes, and clicking (hold left mouse button) on a cell while moving the cursor over the other rows, only the first clicked row gets highlighted on hover:
jsfiddle
table {
border-collapse: collapse;
}
td {
width: 40px;
height: 10px;
border: 1px solid #999;
}
tr:hover {
background-color: #d7d7d7;
}
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
In other major browsers (IE, FF) it will highlight all other rows as expected.
Is this a chrome bug? Or feature? How to get all 3 major browsers behave the same?
If you get a cross-cursor when trying to reproduce, try again several times.


This is a bug I believe. Is there a use case in which you would need :hover to be triggered in this situation?

Related

Make a table without showing the first cell

I want my table to be like that :
wanted table
Mine, is currently like that :
current table
The difference is that in the wanted table, the first cell (at position 0;0) is removed.
I also want to border to be updated, in order to make it goes through the bottom and the right of the removed cell.
The current result is that :current result
here is my current code :
table, th, td {
border: 0.5px solid black;
border-collapse: collapse;
}
.removeCell {
visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<link rel="stylesheet" href="css\desktopStyle.scss">
</head>
<body>
<table>
<tr>
<th class="removeCell">Mois</th>
<th>Data</th>
</tr>
<tr>
<td>Janvier</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>Février</td>
<td>10.01.2014</td>
</tr>
</table>

just remove the border on the first td
td{
border: 1px solid black;
width:40px;
height:10px;
}
table{
border-collapse:collapse;
}
#one{
border:none;
}
<table>
<tr>
<td id='one'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

how can a html table have misaligned cell borders

I am struggling to make a html table that copies the layout of the table above.
I am just wondering what techniques to use and to recreate that table
I have tried nested tables and have looked into using div instead to create this but am still having issues, mainly with the way that the lines are presented in this and are not in an obvious layout

Here is a cool tool:
https://tabletag.net/
Here you need to nest a table in the second row
table,
td,
th {
border: 1px solid #595959;
border-collapse: collapse;
}
td,
th {
padding: 3px;
width: 30px;
height: 25px;
}
th {
background: #f0e6cc;
}
.even {
background: #fbf8f0;
}
.odd {
background: #fefcf9;
}
<table>
<tbody>
<tr>
<td colspan="3"></td>
<td colspan="5"></td>
<td colspan="3" rowspan="2"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="6"></td>
<td colspan="5"></td>
</tr>
<tr>
<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></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<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>

Advanced table/grid with variable number of columns & widths & overflows

I'm in need of some help. I'm trying to create an advanced grid/table.
I have rows with:
a header
subheaders
rows that may contain info
my first column:
header: empty
subheader: name of squad
inforow: name of squadmember
what I need is a sort of grid/table with these requirements:
header: sticky
subheader: sticky under the header (until the next subheader arrives)
first column: fixed width of 250px
number of columns: variable
number of rows: variable
height of columns: 40px
a column with 0 infocells: fixed width of 50px
except when all columns are empty: all columns same width
a column where at least one item has info: minimum width of 100px
but when there is more space available: fill the remaining space evenly
infocolumns need to have a horizontal scroll when my space is overflown, for example:
available width for grid: 1000px
available width for infocolumns: 1000px - 250px = 750px
i have 10 infocolumns: 8 with info, 2 empty
so: 8 * at least 100px (scalable) & 2 * 50px → 900px
the infocolumns need to have a horizontal scroll, the first column, with squad(member)names, is sticky
I don't know exactly where the infocells will be before the data is fetched, but I already need to show a grid/table. Looping over the data in the parentcomponent would be less efficient, so hopefully it can be solved by html/css.
I do know how many columns there will be.
Maybe table isn't the right approach here either.
I'm almost there, but on a big screen the fixed width of the first column is variable and the horizontal flow isn't there yet.
This is what I got so far:
* {
box-sizing: border-box;
}
table {
width: 100%;
}
thead {
position: sticky;
top: 0;
height: 40px;
background: lightsalmon;
z-index: 1;
}
thead:not(:first-of-type) {
top: 44px;
}
th:first-of-type {
width: 250px;
min-width: 250px;
max-width: 250px;
}
td:first-of-type {
width: 250px;
min-width: 250px;
max-width: 250px;
}
td {
height: 40px;
background: lightpink;
}
td.has_data {
min-width: 100px;
width: auto;
}
td:not(.has_data) {
min-width: 50px;
width: 50px;
max-width: 50px;
}
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="table_wrapper">
<table>
<thead>
<th></th>
<th>01/03</th>
<th>02/03</th>
<th>03/03</th>
<th>04/03</th>
<th>05/03</th>
<th>06/03</th>
<th>07/03</th>
<th>08/03</th>
</thead>
<thead>
<th>the programmers</th>
<th>01:00</th>
<th>02:00</th>
<th>03:00</th>
<th>04:00</th>
<th>05:00</th>
<th>06:00</th>
<th>07:00</th>
<th>08:00</th>
</thead>
<tbody>
<tr>
<td>Jeff</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Eric</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="has_data">info!</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Sarah</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="has_data">more info!</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<thead>
<th>1</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>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

What about using a Framework that handles all that? Take a look at this: https://vuetifyjs.com/en/components/data-tables/#usage

Rowspan and colspan from the begining of the table

Generally we make rowspan and colspan after the first column of the table. But in my case I want to draw a table like in this photo :
How to achieve it ?

To solve these problems, imagine everything is expanded and each block is a significant part of the table definition. Using that information, you have 19 columns and 2 rows. From there you allocate your groups:
"Valeurs Cibles Cumulees" has a colspan of 4.
"Chronogramme" has a colspan of 12.
"Taches", "Source of Financement", and "Responsables" have a rowspan of 2.

Here you go:
table,
td {
border: 1px solid #999;
}
table {
width: 400px;
height: 50px
}
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
<td colspan="12"></td>
</tr>
<tr>
<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></td>
<td></td>
</tr>
</table>

write vertically in table rows

I want to write vertically in HTML table.In the last column, I want to the text "time table" to be displayed vertically. It should cover all the rows. Something like this:
L
U
N
C
H
How to do this ?
Here is the table i want to create.
<table style = "border-collapse: collapse" border = "1px">
<thead>
<tr>
<th colspan="6" align="center"> Time Table </th>
</tr>
<tr>
<th>DAY/TIME</th>
<th>8-9</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th rowspan = "6" style="verticle-align: buttom">Lunch Break</th>
</tr>
<tr>
<th>Mon</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Tue</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Wed</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Thu</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Fri</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
</table>

Put your lunch break text inside a div and apply this css
word-wrap: break-word;width:11px;
Have a look at this jsfiddle demo

Add an id (or class) to the th you want vertical text in, and then you can add the following jQuery function - adds a line break after each character:
$(function() {
var html=$('#verticalText').html();
var newHtml='';
for (var i=0;i<html.length;i++) {
newHtml=newHtml+html[i];
newHtml=newHtml+'<br/>';
}
$('#verticalText').html(newHtml);
});
http://jsfiddle.net/K3Ab2/
(modified from Naor's answer to: Add line breaks after n numbers of letters in long words)

Use following HTML code
<table id="MyTable" style = "border-collapse: collapse" border = "1px">
Time Table
<tr>
<th>DAY/TIME</th>
<th>8-9</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th rowspan = "6" id="vertical" style="verticle-align: buttom">Lunch Break</th>
</tr>
<tr>
<th>Mon</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Tue</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Wed</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Thu</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Fri</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
Use Following CSS
table#MyTable tr th#vertical {
width: 1.2em;
white-space: nowrap;
color: #000;
/*Firefox*/
-moz-transform: rotate(-90deg);
/*Safari*/
-webkit-transform: rotate(-90deg);
/*Opera*/
-o-transform: rotate(-90deg);
/*IE*/
writing-mode: tb-rl;
filter: flipv fliph;
border:1px black solid;
}
See this link