I have a table with a fixed header and fixed first column.
I also want to rotate the titles of the columns 45 degrees.
Having the header fixed requires setting a background color on the th. However, this causes a problem with the 45-degrees-rotated titles, because the background of the next column overlaps the text of the previous one. Here is an example of the problem:
.fixed_table {
white-space: nowrap;
margin: 0;
border: none;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.fixed_table td,
.fixed_table th {
padding: 5px;
}
.fixed_table thead th {
padding: 5px;
position: sticky;
top: 0;
z-index: 1;
width: 25vw;
background: #F8F9FA;
}
.fixed_table td {
background: #F8F9FA;
padding: 5px;
text-align: center;
border: 1px solid #ccc;
}
.fixed_table tbody th {
text-align: left;
position: relative;
}
.fixed_table thead th:first-child {
position: sticky;
left: 0;
z-index: 2;
}
.fixed_table tbody th {
position: sticky;
left: 0;
background: #F8F9FA;
z-index: 1;
}
th.rotate {
/* Something you can count on */
height: 140px;
white-space: nowrap;
}
th.rotate > div {
transform:
/* Magic Numbers */
translate(25px, 51px)
/* 45 is really 360 - 45 */
rotate(315deg);
width: 30px;
}
th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
<div style="height: 100%; width: 100%; overflow-y: scroll; background-color: #F8F9FA; height: 400px;">
<table class="fixed_table">
<thead>
<tr>
<th></th>
<th class="rotate"><div><span>Activity 1</span></div></th>
<th class="rotate"><div><span>Activity 2</span></div></span></div></th>
<th class="rotate"><div><span>Activity 3</span></div></th>
<th class="rotate"><div><span>Activity 4</span></div></th>
<th class="rotate"><div><span>Activity 5</span></div></th>
<th class="rotate"><div><span>Activity 6</span></div></th>
<th class="rotate"><div><span>Activity 7</span></div></th>
<th class="rotate"><div><span>Activity 8</span></div></th>
<th class="rotate"><div><span>Activity 9</span></div></th>
<th class="rotate"><div><span>Activity 10</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<th>Employee 1</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 2</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 3</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 4</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 5</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 6</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 7</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 8</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 9</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 10</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 11</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 12</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 13</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 14</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 15</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
</tbody>
</table>
</div>
And if I don't set the background colors, the rows scroll through the column titles:
.fixed_table {
white-space: nowrap;
margin: 0;
border: none;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.fixed_table td,
.fixed_table th {
padding: 5px;
}
.fixed_table thead th {
padding: 5px;
position: sticky;
top: 0;
z-index: 1;
width: 25vw;
background: transparent;
}
.fixed_table td {
background: #F8F9FA;
padding: 5px;
text-align: center;
border: 1px solid #ccc;
}
.fixed_table tbody th {
text-align: left;
position: relative;
}
.fixed_table thead th:first-child {
position: sticky;
left: 0;
z-index: 2;
}
.fixed_table tbody th {
position: sticky;
left: 0;
background: #F8F9FA;
z-index: 1;
}
th.rotate {
/* Something you can count on */
height: 140px;
white-space: nowrap;
}
th.rotate > div {
transform:
/* Magic Numbers */
translate(25px, 51px)
/* 45 is really 360 - 45 */
rotate(315deg);
width: 30px;
}
th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
<div style="height: 100%; width: 100%; overflow-y: scroll; background-color: #F8F9FA; height: 400px;">
<table class="fixed_table">
<thead>
<tr>
<th></th>
<th class="rotate"><div><span>Activity 1</span></div></th>
<th class="rotate"><div><span>Activity 2</span></div></span></div></th>
<th class="rotate"><div><span>Activity 3</span></div></th>
<th class="rotate"><div><span>Activity 4</span></div></th>
<th class="rotate"><div><span>Activity 5</span></div></th>
<th class="rotate"><div><span>Activity 6</span></div></th>
<th class="rotate"><div><span>Activity 7</span></div></th>
<th class="rotate"><div><span>Activity 8</span></div></th>
<th class="rotate"><div><span>Activity 9</span></div></th>
<th class="rotate"><div><span>Activity 10</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<th>Employee 1</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 2</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 3</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 4</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 5</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 6</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 7</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 8</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 9</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 10</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 11</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 12</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 13</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 14</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 15</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
</tbody>
</table>
</div>
Does anyone have a solution to (a) keep the header fixed and not show row data that scrolls up behind it, and (b) to have all 45-degree rotated titles still show correctly?
Thanks in advance!
Try the following code:
.fixed_table thead th {
padding: 5px;
position: sticky;
top: 0;
z-index: 1;
background-color: white;
width: 25vw;
/* background: transparent; */
}
I hope this helps.
.fixed_table {
white-space: nowrap;
margin: 0;
border: none;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.fixed_table td,
.fixed_table th {
padding: 5px;
}
.fixed_table thead th {
padding: 5px;
position: sticky;
top: 0;
z-index: 1;
width: 25vw;
background: white;
}
.fixed_table td {
background: #F8F9FA;
padding: 5px;
text-align: center;
border: 1px solid #ccc;
}
.fixed_table tbody th {
text-align: left;
position: relative;
}
.fixed_table thead th:first-child {
position: sticky;
left: 0;
z-index: 2;
}
.fixed_table tbody th {
position: sticky;
left: 0;
background: #F8F9FA;
z-index: 1;
}
th.rotate {
/* Something you can count on */
height: 140px;
white-space: nowrap;
}
th.rotate > div {
transform:
/* Magic Numbers */
translate(25px, 51px)
/* 45 is really 360 - 45 */
rotate(315deg);
width: 30px;
}
th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
<div style="height: 100%; width: 100%; overflow-y: scroll; background-color: #F8F9FA; height: 400px;">
<table class="fixed_table">
<thead>
<tr>
<th></th>
<th class="rotate"><div><span>Activity 1</span></div></th>
<th class="rotate"><div><span>Activity 2</span></div></span></div></th>
<th class="rotate"><div><span>Activity 3</span></div></th>
<th class="rotate"><div><span>Activity 4</span></div></th>
<th class="rotate"><div><span>Activity 5</span></div></th>
<th class="rotate"><div><span>Activity 6</span></div></th>
<th class="rotate"><div><span>Activity 7</span></div></th>
<th class="rotate"><div><span>Activity 8</span></div></th>
<th class="rotate"><div><span>Activity 9</span></div></th>
<th class="rotate"><div><span>Activity 10</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<th>Employee 1</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 2</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 3</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 4</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 5</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 6</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 7</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 8</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 9</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 10</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 11</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 12</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 13</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 14</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
<tr>
<th>Employee 15</th>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<tr/>
</tbody>
</table>
</div>
Related
I'm working on a fixed first column table, so that when it scrolls horizontally, in mobile for example, the first column is fixed.
The problem I'm having with my implementation is that when the contents of a cell in that fixed column goes beyond one line of text, the text spills into the next rows cell. This is due to the absolute positioning of the cells in that fixed column.
My implementation (From https://codepen.io/gregor/pen/ApKxu):
HTML
<div>
<table class="sticky">
<thead>
<tr>
<th class="headcol">RM</th>
<th>Average</th>
<th>Lombardi</th>
<th>Brzycki</th>
<th>Epley</th>
<th>Mayhew</th>
<th>O'Conner</th>
<th>Wathan</th>
<th>Lander</th>
</tr>
</thead>
<tbody>
<tr>
<td class="headcol">1RM</td>
<td><strong>12</strong></td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td class="headcol">2RM</td>
<td><strong>11</strong>
</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td class="headcol">3RM</td>
<td><strong>10</strong>
</td>
<td>10</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td class="headcol">4RM</td>
<td><strong>10</strong>
</td>
<td>10</td>
<td>11</td>
<td>10</td>
<td>11</td>
<td>11</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td class="headcol">5RM</td>
<td><strong>10</strong>
</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td class="headcol">6RM</td>
<td><strong>10</strong>
</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td class="headcol">7RM</td>
<td><strong>9</strong>
</td>
<td>9</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td class="headcol">8RM</td>
<td><strong>9</strong>
</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>10</td>
<td>10</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td class="headcol">9RM</td>
<td><strong>9</strong>
</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>10</td>
<td>10</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td class="headcol">10RM</td>
<td><strong>9</strong>
</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
CSS
div {
overflow-x:scroll;
margin-left:2em;
}
.headcol {
position:absolute;
width:2em;
left:0;
}
The problem presents itself when I add 'Foo Foo' to '1RM' in one of the Fixed column cells, like so:
<td class="headcol">1RM Foo Foo</td>
Result:
Ideas?
TIA
The problem is that you have a fixed width for the absolute positioned column. You could increase the width.
OR
You could use position: sticky and background-color for the column.
div {
overflow-x:scroll;
margin-left:2em;
}
.headcol {
position:sticky;
left:0;
background-color: white;
width: auto;
}
<div>
<table class="sticky">
<thead>
<tr>
<th class="headcol">RM</th>
<th>Average</th>
<th>Lombardi
</th>
<th>Brzycki
</th>
<th>Epley
</th>
<th>Mayhew
</th>
<th>O'Conner
</th>
<th>Wathan
</th>
<th>Lander
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="headcol">1RM Foo Foo</td>
<td style="font-size: 120%;"><strong>12</strong>
</td>
<td style="font-size: 120%;">12</td>
<td style="font-size: 120%;">12</td>
<td style="font-size: 120%;">12</td>
<td style="font-size: 120%;">12</td>
<td style="font-size: 120%;">12</td>
<td style="font-size: 120%;">12</td>
<td style="font-size: 120%;">12</td>
</tr>
<tr>
<td class="headcol">2RM</td>
<td><strong>11</strong>
</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td class="headcol">3RM</td>
<td><strong>10</strong>
</td>
<td>10</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td class="headcol">4RM</td>
<td><strong>10</strong>
</td>
<td>10</td>
<td>11</td>
<td>10</td>
<td>11</td>
<td>11</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td class="headcol">5RM</td>
<td><strong>10</strong>
</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td class="headcol">6RM</td>
<td><strong>10</strong>
</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td class="headcol">7RM</td>
<td><strong>9</strong>
</td>
<td>9</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td class="headcol">8RM</td>
<td><strong>9</strong>
</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>10</td>
<td>10</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td class="headcol">9RM</td>
<td><strong>9</strong>
</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>10</td>
<td>10</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td class="headcol">10RM</td>
<td><strong>9</strong>
</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.table-scroll {
position: relative;
max-width: 775px;
margin: auto;
overflow: hidden;
border: 1px solid #000;
}
.table-wrap {
width: 100%;
overflow: auto;
}
.table-scroll table {
width: 100%;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-scroll th,
.table-scroll td {
padding: 5px 10px;
border: 1px solid #000;
background: #fff;
white-space: nowrap;
vertical-align: top;
}
.table-scroll thead,
.table-scroll tfoot {
background: #f9f9f9;
}
.clone {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.clone th,
.clone td {
visibility: hidden
}
.clone td,
.clone th {
border-color: transparent
}
.clone tbody th {
visibility: visible;
color: #000;
}
.clone .fixed-side {
border: 1px solid #000;
background: #eee;
visibility: visible;
}
.clone thead,
.clone tfoot {
background: transparent;
}
</style>
</head>
<body>
<div id="table-scroll" class="table-scroll">
<div class="table-wrap">
<table class="main-table">
<thead>
<tr>
<th class="fixed-side" scope="col">RM</th>
<th scope="col">Average</th>
<th scope="col">Lombardi</th>
<th scope="col">Brzycki</th>
<th scope="col">Epley</th>
<th scope="col">Mayhew</th>
<th scope="col">O'Conner</th>
<th scope="col">Wathan</th>
<th scope="col">Lander</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed-side">1RM Foo Foo</th>
<td style="font-size: 120%;"><strong>12</strong></td>
<td style="font-size: 120%;">12</td>
<td style="font-size: 120%;">12</td>
<td style="font-size: 120%;">12</td>
<td style="font-size: 120%;">12</td>
<td style="font-size: 120%;">12</td>
<td style="font-size: 120%;">12</td>
<td style="font-size: 120%;">12</td>
</tr>
<tr>
<th class="fixed-side">2RM</th>
<td><strong>11</strong></td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<th class="fixed-side">3RM</th>
<td><strong>10</strong></td>
<td>10</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<th class="fixed-side">4RM</th>
<td><strong>10</strong></td>
<td>10</td>
<td>11</td>
<td>10</td>
<td>11</td>
<td>11</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<th class="fixed-side">5RM</th>
<td><strong>10</strong></td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<th class="fixed-side">6RM</th>
<td><strong>10</strong></td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<th class="fixed-side">7RM</th>
<td><strong>9</strong></td>
<td>9</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<th class="fixed-side">8RM</th>
<td><strong>9</strong></td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>10</td>
<td>10</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<th class="fixed-side">9RM</th>
<td><strong>9</strong></td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>10</td>
<td>10</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<th class="fixed-side">10RM</th>
<td><strong>9</strong></td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
// requires jquery library
jQuery(document).ready(function() {
jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
});
</script>
</body>
</html>
I have a left menu which has a fixed size and a main part which should take the remaining place and contain a table. A scrollbar must appear if the table is too large.
In order to achieve this, I use a flex-box and it works well :
See the code snippet :
.h-container {
display: flex;
flex-direction: row;
}
.left-container {
width: 300px;
background-color: lightgray;
}
.container {
overflow-x:auto;
flex: 1;
}
<div class="h-container">
<div class="left-container">Left menu</div>
<div class="container">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
<th>Column 15</th>
<th>Column 16</th>
<th>Column 17</th>
<th>Column 18</th>
<th>Column 19</th>
<th>Column 20</th>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
Now, I am trying to insert a banner at the top of the table. In order to achieve this, I wanted to use another flex-box (a vertical flex-box nested in the horizontal flex-box).
Problem : the <table> does not take 100% of its container's width anymore. Instead, it increases the size of its container in order to fit into it without scroll bars. Because of that, a new scroll bar appear on the main container.
See the code snippet :
.h-container {
display: flex;
flex-direction: row;
}
.left-container {
width: 300px;
flex-shrink:0;
background-color: lightgray;
}
.v-container {
flex: 1;
}
.banner {
height: 50px;
background-color: lightgreen;
}
.container {
overflow-x:auto;
flex:1;
}
<div class="h-container">
<div class="left-container">Left menu</div>
<div class="v-container">
<div class="banner">
Banner
</div>
<div class="container">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
<th>Column 15</th>
<th>Column 16</th>
<th>Column 17</th>
<th>Column 18</th>
<th>Column 19</th>
<th>Column 20</th>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Any ideas?
Solution
Add min-width: 0 to .v-container (demo).
Tested in Chrome, FF and IE11.
Explanation
You're bumping up against the implied minimum sizing algorithm of flex items.
This is a default setting that prevents a flex item from shrinking past the size of its content.
The defaults are...
min-height: auto
min-width: auto
...for flex items in column-direction and row-direction, respectively.
You can override these settings with:
min-height: 0
min-width: 0
From the spec:
4.5. Implied Minimum Size of Flex
Items
To provide a more reasonable default minimum size for flex items, this
specification introduces a new auto value as the initial value of
the min-width and min-height properties defined in CSS 2.1... read more
.h-container {
display: flex;
flex-direction: row;
}
.left-container {
flex: 0 0 300px;
background-color: lightgray;
}
.v-container {
flex: 1;
min-width: 0; /* NEW */
}
.banner {
height: 50px;
background-color: lightgreen;
}
.container {
overflow-x: auto;
flex: 1;
}
<div class="h-container">
<div class="left-container">Left menu</div>
<div class="v-container">
<div class="banner">Banner</div>
<div class="container">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
<th>Column 15</th>
<th>Column 16</th>
<th>Column 17</th>
<th>Column 18</th>
<th>Column 19</th>
<th>Column 20</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
What about using calc(100% - 300px) on the v-container and 100% width on the container.
.h-container {
display: flex;
flex-direction: row;
}
.left-container {
width: 300px;
flex-shrink:0;
background-color: lightgray;
}
.v-container {
/* flex: 1; */
width: calc(100% - 300px);
}
.banner {
height: 50px;
background-color: lightgreen;
}
.container {
overflow-x:auto;
/* flex:1;*/
width:100%;
}
<div class="h-container">
<div class="left-container">Left menu</div>
<div class="v-container">
<div class="banner">
Banner
</div>
<div class="container">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
<th>Column 15</th>
<th>Column 16</th>
<th>Column 17</th>
<th>Column 18</th>
<th>Column 19</th>
<th>Column 20</th>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
You can do another flexbox in the right div but in columns:
.h-container {
display: flex;
flex-direction: row;
}
.left-container {
width: 300px;
flex-shrink:0;
background-color: lightgray;
}
.v-container {
flex: 1;
overflow-x:auto;
display:flex;
flex-direction:column;
}
.banner {
height: 50px;
background-color: lightgreen;
}
.container {
overflow-x:auto;
flex:1;
}
<div class="h-container">
<div class="left-container">Left menu</div>
<div class="v-container">
<div class="banner">
Banner
</div>
<div class="container">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
<th>Column 15</th>
<th>Column 16</th>
<th>Column 17</th>
<th>Column 18</th>
<th>Column 19</th>
<th>Column 20</th>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'd like to make an IPA vowel diagram like this one:
I have made a table with 7 rows and 5 columns in HTML, but how do I change the shape of the table to trapezoid using CSS?
I know that it's possible to draw a trapezoid in a graphics editor and then use the resulting image as a background in HTML, but I'd like to do do this with pure CSS if possible.
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
</table>
you can use css like this to make shapes and build the table. Is dont think there i an other way to be honest.
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
next time try to show us what you DID try to get the result.
I think that the closest that you can get with CSS is using some 3d perspective:
table {
transform: translate(100px, 130px) perspective(200px) rotateX(-40deg);
transform-origin: bottom right;
transform-style: preserve-3d;
}
td,
th {
transform: rotateX(40deg);
backface-visibility: hidden;
}
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
</table>
In table I have some lines. I am setting :hover to tbody>tr and it doesn't work. However, if I set the same :hover selector to tbody>td does work fine.
Anybody can help me?
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex" />
<title>Template Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
table {
width: 100%
}
table thead tr th:first-child {
width: 34%
}
table thead tr th {
width: 2%;
background: #2F75B5;
font-weight: normal;
padding: 2px 3px;
color: #FFFFD4;
}
table tbody tr td:first-child {
width: 34%
}
table tbody tr td {
width: 2%;
z-index: 0;
padding: 2px 0px 3px 10px;
background-color: #DDEBF7
}
table tbody td:hover {
background-color: red
}
.blue {
background-color: #79B7E7
}
.red {
background: #F08080;
font-weight: normal;
}
.green {
background-color: #60CA8F;
font-weight: normal;
}
html {
margin: 1px;
}
body {
font-size: 80%
}
p {
font-size: medium;
}
html,
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
overflow: hidden;
height: 98%;
}
.number {
text-align: right;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Colaborador</th>
<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>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
<th>27</th>
<th>28</th>
<th>29</th>
<th>30</th>
<th>31</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
</tbody>
</table>
</body>
</html>
Since the td element already contains a background color, you need to select the td after hovering tr to override it.
table tbody tr:hover td {
background-color: red
}
JSfiddle Demo
table tbody tr:hover td {
background-color: red
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex" />
<title>Template Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
table {
width: 100%
}
table thead tr th:first-child {
width: 34%
}
table thead tr th {
width: 2%;
background: #2F75B5;
font-weight: normal;
padding: 2px 3px;
color: #FFFFD4;
}
table tbody tr td:first-child {
width: 34%
}
table tbody tr td {
width: 2%;
z-index: 0;
padding: 2px 0px 3px 10px;
background-color: #DDEBF7
}
table tbody td:hover {
background-color: red
}
.blue {
background-color: #79B7E7
}
.red {
background: #F08080;
font-weight: normal;
}
.green {
background-color: #60CA8F;
font-weight: normal;
}
html {
margin: 1px;
}
body {
font-size: 80%
}
p {
font-size: medium;
}
html,
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
overflow: hidden;
height: 98%;
}
.number {
text-align: right;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Colaborador</th>
<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>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
<th>27</th>
<th>28</th>
<th>29</th>
<th>30</th>
<th>31</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
<tr>
<td>Colaborador</td>
<td class="red"></td>
<td class="red"></td>
<td>3</td>
<td>4</td>
<td>5</td>
<td class="blue">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="green number">32</td>
</tr>
</tbody>
</table>
</body>
</html>
Try this.
tbody > tr:hover td {
/*style*/
}
Your td already have a background-color, which can be overwritten, as Manoj Kumar have said and shown in his answer.
If you went the whole row to change the background-color, you need to do the following:
Remove background-color from td and add it to the tr:
table tbody tr td {
width: 2%;
z-index: 0;
padding: 2px 0px 3px 10px;
}
table tbody tr {
background-color: #DDEBF7
}
Change the hover to the tr:
table tbody tr:hover {
background-color: red
}
To show it works, heres a JSFiddle
tbody>td
'>' - stands for immediate child
Means the style will be only applied to td which is the immediate child of the tbody.
Make sure you have td as a direct child of tbody.
Is this the behaviour you r looking for ??
try this js fiddle
http://jsfiddle.net/ug23pLg5/
Is there a CSS equivalent of frame=void?, or will I have to add frame=void to all the future tables I make?:
<table border=1 rules=all frame=void>
I tried googling it, and I found no results.
The old html presentational attributes are not a useful thing to use nowadays. I would discourage you from using any attributes on any elements in your body with the exceptions of class, id, data-* and things on input, audio, video or img.
To get the same effect, use
table {
border-collapse: collapse;
border-style:hidden;
}
table td {
border-width: 1px;
border-style: inset;
border-color:black;
}
As demoed here: http://jsfiddle.net/HknDE/35/
Use CSS the border property:
table { border:none; }
CSS rules will trump these old-school presentational HTML attributes. Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS and Tables. Void frame?</title>
<style type="text/css">
table {
border:none;
}
</style>
</head>
<body>
<h2>No Frame Attribute</h2>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>12</td>
<td>15</td>
<td>18</td>
<td>21</td>
<td>24</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
<td>20</td>
<td>24</td>
<td>28</td>
<td>32</td>
<td>36</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>30</td>
<td>35</td>
<td>40</td>
<td>45</td>
</tr>
<tr>
<td>6</td>
<td>12</td>
<td>18</td>
<td>24</td>
<td>30</td>
<td>36</td>
<td>42</td>
<td>48</td>
<td>54</td>
</tr>
<tr>
<td>7</td>
<td>14</td>
<td>21</td>
<td>28</td>
<td>35</td>
<td>42</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>8</td>
<td>16</td>
<td>24</td>
<td>32</td>
<td>40</td>
<td>48</td>
<td>56</td>
<td>64</td>
<td>72</td>
</tr>
<tr>
<td>9</td>
<td>18</td>
<td>27</td>
<td>36</td>
<td>45</td>
<td>54</td>
<td>63</td>
<td>72</td>
<td>81</td>
</tr>
</tbody>
</table>
<h2>Frame = "box"</h2>
<table frame="box">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>12</td>
<td>15</td>
<td>18</td>
<td>21</td>
<td>24</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
<td>20</td>
<td>24</td>
<td>28</td>
<td>32</td>
<td>36</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>30</td>
<td>35</td>
<td>40</td>
<td>45</td>
</tr>
<tr>
<td>6</td>
<td>12</td>
<td>18</td>
<td>24</td>
<td>30</td>
<td>36</td>
<td>42</td>
<td>48</td>
<td>54</td>
</tr>
<tr>
<td>7</td>
<td>14</td>
<td>21</td>
<td>28</td>
<td>35</td>
<td>42</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>8</td>
<td>16</td>
<td>24</td>
<td>32</td>
<td>40</td>
<td>48</td>
<td>56</td>
<td>64</td>
<td>72</td>
</tr>
<tr>
<td>9</td>
<td>18</td>
<td>27</td>
<td>36</td>
<td>45</td>
<td>54</td>
<td>63</td>
<td>72</td>
<td>81</td>
</tr>
</tbody>
</table>
<h2>Frame = "void"</h2>
<table frame="void">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>12</td>
<td>15</td>
<td>18</td>
<td>21</td>
<td>24</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
<td>20</td>
<td>24</td>
<td>28</td>
<td>32</td>
<td>36</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>30</td>
<td>35</td>
<td>40</td>
<td>45</td>
</tr>
<tr>
<td>6</td>
<td>12</td>
<td>18</td>
<td>24</td>
<td>30</td>
<td>36</td>
<td>42</td>
<td>48</td>
<td>54</td>
</tr>
<tr>
<td>7</td>
<td>14</td>
<td>21</td>
<td>28</td>
<td>35</td>
<td>42</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>8</td>
<td>16</td>
<td>24</td>
<td>32</td>
<td>40</td>
<td>48</td>
<td>56</td>
<td>64</td>
<td>72</td>
</tr>
<tr>
<td>9</td>
<td>18</td>
<td>27</td>
<td>36</td>
<td>45</td>
<td>54</td>
<td>63</td>
<td>72</td>
<td>81</td>
</tr>
</tbody>
</table>
</body>
</html>
... all three tables above render identically even though they have different values for the frame attribute.
Just set the tables border to 0px. If you want to have those inner borders, set those borders on tr and td.
table { border:0px; }
tr { border-bottom:1px; }
tr.last { border-bottom:0px; }
td { border-right:1px; }
td.last { border-right:0px; }
Or sth like that …