I need to get my first column to stay as sticky when I scroll table side ways.
https://jsfiddle.net/zinoui/BmLpV/
Already tried this but couldn't get it work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
td {
border-spacing: 1;
border: 1px solid #d2d2d2;
}
table {
border-collapse: collapse;
border-spacing: 15;
width: 100%;
}
td {
text-align: left;
padding: 8px;
color: black;
font-weight: bold;
text-align: center;
}
th.rotate {
height: 140px;
white-space: nowrap;
}
th.rotate > div {
transform:
translate(47px,50px)
rotate(315deg);
width: 30px;
}
th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
.csstransforms & th.rotate {
height: 140px;
white-space: nowrap;
}
</style>
</head>
<body>
<div style="overflow-x:auto;">
<table>
<tr>
<th>Nimi</th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
</tr>
<tr>
<td>
<a href="#1" style="color:black">
<div style="height:100%;width:100%">
Pelle<br>Pyrkyri
</div></a></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
</tr>
<tr>
<td>
<a href="#2" style="color:black">
<div style="height:100%;width:100%">
Lilli<br>Lyllerö
</div></a></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="##006600"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
</tr>
<tr>
<td>Kelpo<br>Keppana</td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
</tr>
<tr>
<td>Paula<br>Pauligilta</td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="##006600"></td>
<td bgcolor="red"></td>
<td bgcolor="##006600"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="##006600"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="##006600"></td>
</tr>
<tr>
<td>Alfred<br>Aikuinen</td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
</tr>
</table>
</div>
</body>
</html>
This is what I tried with solution found here: https://jsfiddle.net/zinoui/BmLpV/ . First column stayed sticky but everything else is screwed and not working as intended. Here is my try: https://jsfiddle.net/vzwpyjke/
Try giving the column a position: absolute
Check out this example, should have what you need:
HTML
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="zui-table">
<thead>
<tr>
<th class="zui-sticky-col">Name</th>
<th>Number</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Prior to NBA/Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
<td>15</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
<td>Kentucky/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Isaiah Thomas</td>
<td>22</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
<td>Washington/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Ben McLemore</td>
<td>16</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
<td>Kansas/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Marcus Thornton</td>
<td>23</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
<td>Louisiana State/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Jason Thompson</td>
<td>34</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
<td>Rider/USA</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
.zui-table {
border: none;
border-right: solid 1px #DDEFEF;
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-table tbody td {
border-bottom: solid 1px #DDEFEF;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 300px;
}
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
left: 0;
position: absolute;
top: auto;
width: 120px;
}
http://jsfiddle.net/zinoui/BmLpV/
Related
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
.chess-board { border-spacing: 0; border-collapse: collapse; }
.chess-board th { padding: 1000px; }
.chess-board th + th { border-bottom: 1px solid #000; }
.chess-board th:first-child,
.chess-board td:last-child { border-right: 1px solid #000; }
.chess-board tr:last-child td { border-bottom: 1px solid; }
.chess-board th:empty { border: none; }
.chess-board td { width: 2000px; height: 2000px; text-align: center; font-size: 2000px; line-height: 0; }
.chess-board .light { background: white; }
.chess-board .dark { background: green; }
.button { width: 500px; height: 200px; font-size: 50px;line-height:0;font-weight: bold;border: 10px solid black; }
.letters { width: 500px; height: 500px; text-align: center; font-size: 600px; line-height: 0; }
</style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<body>
<table id="Chess_Board" class="chess-board">
<tbody>
<tr>
<th></th>
<th class="letters">a</th>
<th class="letters">b</th>
<th class="letters">c</th>
<th class="letters">d</th>
<th class="letters">e</th>
<th class="letters">f</th>
<th class="letters">g</th>
<th class="letters">h</th>
</tr>
<tr>
<th class="letters">8</th>
<td class="light">♜</td>
<td class="dark">♞</td>
<td class="light">♝</td>
<td class="dark">♛</td>
<td class="light">♚</td>
<td class="dark">♝</td>
<td class="light">♞</td>
<td class="dark">♜</td>
</tr>
<tr>
<th class="letters">7</th>
<td class="dark">♟</td>
<td class="light">♟</td>
<td class="dark">♟</td>
<td class="light">♟</td>
<td class="dark">♟</td>
<td class="light">♟</td>
<td class="dark">♟</td>
<td class="light">♟</td>
</tr>
<tr>
<th class="letters">6</th>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
</tr>
<tr>
<th class="letters">5</th>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
</tr>
<tr>
<th class="letters">4</th>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
</tr>
<tr>
<th class="letters">3</th>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
<td class="dark"></td>
<td class="light"></td>
</tr>
<tr>
<th class="letters">2</th>
<td class="light">♙</td>
<td class="dark">♙</td>
<td class="light">♙</td>
<td class="dark">♙</td>
<td class="light">♙</td>
<td class="dark">♙</td>
<td class="light">♙</td>
<td class="dark">♙</td>
</tr>
<tr>
<th class="letters">1</th>
<td class="dark">♖</td>
<td class="light">♘</td>
<td class="dark">♗</td>
<td class="light">♕</td>
<td class="dark">♔</td>
<td class="light">♗</td>
<td class="dark">♘</td>
<td class="light">♖</td>
</tr>
</tbody>
</table>
<br>
<button class="button" onclick="Screenshot()">Download as Png</button>
<br>
</body>
<script>
function Screenshot(){
html2canvas(document.querySelector("#Chess_Board")).then(canvas => {
document.body.appendChild(canvas)
});}
</script>
</html>
here is the result[1]
[1]: https://i.stack.imgur.com/8sZq3.jpg
now i want a and 8 inside the ROOK's Cell like marked in red
please help me i have been trying so many days for this answer.
................................................................
......................................0000000000000000000000000000000000000000000000
That is perfect work for CSS Grid:
Set wrapper to be display: grid
Set items position in places where you want it to be
.wrapper {
height: 200px;
width: 200px;
border: 1px solid rgba(0, 0, 0, .1);
display: grid;
}
.wrapper div {
border: 1px solid rgba(0, 255, 0, .1);
display: flex;
align-items: center;
justify-content: center;
}
.middle {
grid-row: 2;
grid-column: 2;
}
.top {
grid-column: 1;
}
.bottom {
grid-column: 3;
}
.left {
grid-row: 1;
}
.right {
grid-row: 3;
}
<div class="wrapper">
<div class="top left">a</div>
<div class="middle">b</div>
<div class="bottom right">c</div>
</div>
I am programming in css and html. i made a table but when the page width changes only one column changes width it instead of every. For styling reasons I used different tags for different td-elements. the table. the relevant code is probably the css part with the table-layout:fixed; line.
/* basic style*/
.c_container{
margin:0 auto;
width: 80%;
height: auto;
}
.c_week{
font-weight: bold;
background-color: rgba(255,0,0,0.2);
}
.c_td:hover{
background-color: #add8e6;
}
.c_November{
text-align: center;
background-color: #CDCDCD;
}
.c_weekdays{
color: black;
background-color: #D0F0C0;
}
.c_calendar, .c_th, .c_td, .c_week{
width: 100%;
table-layout: fixed;
text-align: center;
font-size: 20px;
border:3px solid #000;
border-collapse: collapse;
cursor: pointer;
}
.c_td{
text-align: left;
vertical-align: top;
font-size: 10px;
}
/* markere helg */
.c_weekend{
background-color: #FED8E1;
}
/* markerer datoer som ikke er i november */
.c_graydays{
background-color: #D3D3D3;
}
/* markere spesielle hendelser*/
.c_expedition, .c_talent, .cr_talent{
background-color: #FFFCBB;
}
/* hover*/
.c_expedition .c_expeditiontext {
visibility: hidden;
color: white;
background-color: black;
text-align: center;
position: absolute;
z-index: 2;
border-radius: 8px;
padding: 10px;
}
.c_expedition:hover .c_expeditiontext {
visibility: visible;
}
.c_talent .c_talenttext {
visibility: hidden;
color: white;
background-color: black;
text-align: center;
position: absolute;
z-index: 2;
border-radius: 8px;
padding: 10px;
}
.c_talent:hover .c_talenttext {
visibility: visible;
}
.cr_talent .cr_talenttext {
visibility: hidden;
color: white;
background-color: black;
text-align: center;
position: absolute;
z-index: 2;
border-radius: 8px;
padding: 10px;
}
.cr_talent:hover .cr_talenttext {
visibility: visible;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Calendar</title>
<link rel="stylesheet" href="calendar.css">
<script type="text/javascript" src="calendar.js" async></script>
</head>
<body>
<div class="c_container">
<div class="c_November" >
<h2 id="c_title">November 2020</h2>
</div>
<table id="c_calendar" >
<tr>
<th class="c_weekdays c_th">Week</th>
<th class="c_weekdays c_th">Mon</th>
<th class="c_weekdays c_th">Tue</th>
<th class="c_weekdays c_th">Wed</th>
<th class="c_weekdays c_th">Thu</th>
<th class="c_weekdays c_th">Fri</th>
<th class="c_weekdays c_th">Sat</th>
<th class="c_weekdays c_th">Sun</th>
</tr>
<tr>
<td class="c_week " >44</td>
<td class="c_graydays c_td" >26</td>
<td class="c_graydays c_td" >27</td>
<td class="c_graydays c_td" >28</td>
<td class="c_graydays c_td" >29</td>
<td class="c_graydays c_td" >30</td>
<td class="c_graydays c_weekend c_td" >31</td>
<td class="c_weekend c_td">1</td>
</tr>
<tr>
<td class="c_week " >45</td>
<td class="c_td">2</td>
<td class="c_td">3</td>
<td class="c_td">4</td>
<td class="c_td">5</td>
<td class="c_td">6</td>
<td class="c_weekend c_td">7</td>
<td class="c_weekend c_td">8</td>
</tr>
<tr>
<td class="c_week ">46</td>
<td class="c_td">9</td>
<td class="c_td">10</td>
<td class="c_td">11</td>
<td class="c_td">12</td>
<td class="c_td">13</td>
<td class="c_weekend c_td">14</td>
<td class="c_weekend c_td">15</td>
</tr>
<tr>
<td class="c_week" >47</td>
<td class="c_td">16</td>
<td class="c_td">17</td>
<td class="c_td">18</td>
<td class="c_expedition c_td">19
<span class="c_expeditiontext"> Thursday the 19th of November all pupils will have an expedition to damlia, our local dam. There we will learn more about insects and other wildlife near the dam. The trip will be from 08:00 to 15:00. Meet at the main entrance 07.45 and remember to pack a lunch!</span>
</td>
<td class="c_td">20</td>
<td class="c_weekend c_td">21</td>
<td class="c_weekend c_td">22</td>
</tr>
<tr>
<td class="c_week ">48</td>
<td class="c_talent c_td">23
<span class="c_talenttext"> 23rd of november is the time for the biyearly talentshow! The show will take place in auditorium A1 at 18.00 til 21.00.</span> </td>
<td class="cr_talent c_td">24
<span class="cr_talenttext"> This is a rerun of yesterdays talentshow, except this time parents are welcome as well! (at auditorium A1 18.00 - 21:00)</span>
</td>
<td class="c_td">25</td>
<td class="c_td">26</td>
<td class="c_td">27</td>
<td class="c_weekend c_td" >28</td>
<td class="c_weekend c_td">29</td>
</tr>
<tr>
<td class="c_week ">49</td>
<td class="c_td">30</td>
<td class="c_graydays c_td" >1</td>
<td class="c_graydays c_td" >2</td>
<td class="c_graydays c_td" >3</td>
<td class="c_graydays c_td" >4</td>
<td class="c_graydays c_weekend c_td" >5</td>
<td class="c_graydays c_weekend c_td" >6</td>
</tr>
</table>
</div>
</body>
</html>
This is text to post my question
This is text to post my question
This is text to post my question
This is text to post my question
This is text to post my question
This is text to post my questionThis is text to post my question
This is text to post my question
This is text to post my question
This is text to post my question
This is text to post my question
This is text to post my question
Apply width: 100% only to the table itself (#c_calendar ), not to the cells or other elements (i.e. erase it from the rule for .c_calendar, .c_th, .c_td, .c_week).
If you want the first column to be wider than the others, you can apply a min-width setting to it.
Edit: If you want all other cells to always have the same width, you can apply a min-width to .c_td, which I just added in my snippet below.
To force all cells to have the same width (if possible, depending on content), you can also simply apply min-width to td (and maybe also th).
/* basic style*/
.c_container{
margin:0 auto;
width: 80%;
height: auto;
}
.c_week{
font-weight: bold;
background-color: rgba(255,0,0,0.2);
}
.c_td {
min-width: 50px;
}
.c_td:hover{
background-color: #add8e6;
}
.c_November{
text-align: center;
background-color: #CDCDCD;
}
.c_weekdays{
color: black;
background-color: #D0F0C0;
}
#c_calendar {
width: 100%;
}
.c_calendar, .c_th, .c_td, .c_week{
table-layout: fixed;
text-align: center;
font-size: 20px;
border:3px solid #000;
border-collapse: collapse;
cursor: pointer;
}
.c_td{
text-align: left;
vertical-align: top;
font-size: 10px;
}
/* markere helg */
.c_weekend{
background-color: #FED8E1;
}
/* markerer datoer som ikke er i november */
.c_graydays{
background-color: #D3D3D3;
}
/* markere spesielle hendelser*/
.c_expedition, .c_talent, .cr_talent{
background-color: #FFFCBB;
}
/* hover*/
.c_expedition .c_expeditiontext {
visibility: hidden;
color: white;
background-color: black;
text-align: center;
position: absolute;
z-index: 2;
border-radius: 8px;
padding: 10px;
}
.c_expedition:hover .c_expeditiontext {
visibility: visible;
}
.c_talent .c_talenttext {
visibility: hidden;
color: white;
background-color: black;
text-align: center;
position: absolute;
z-index: 2;
border-radius: 8px;
padding: 10px;
}
.c_talent:hover .c_talenttext {
visibility: visible;
}
.cr_talent .cr_talenttext {
visibility: hidden;
color: white;
background-color: black;
text-align: center;
position: absolute;
z-index: 2;
border-radius: 8px;
padding: 10px;
}
.cr_talent:hover .cr_talenttext {
visibility: visible;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Calendar</title>
<link rel="stylesheet" href="calendar.css">
<script type="text/javascript" src="calendar.js" async></script>
</head>
<body>
<div class="c_container">
<div class="c_November" >
<h2 id="c_title">November 2020</h2>
</div>
<table id="c_calendar" >
<tr>
<th class="c_weekdays c_th">Week</th>
<th class="c_weekdays c_th">Mon</th>
<th class="c_weekdays c_th">Tue</th>
<th class="c_weekdays c_th">Wed</th>
<th class="c_weekdays c_th">Thu</th>
<th class="c_weekdays c_th">Fri</th>
<th class="c_weekdays c_th">Sat</th>
<th class="c_weekdays c_th">Sun</th>
</tr>
<tr>
<td class="c_week " >44</td>
<td class="c_graydays c_td" >26</td>
<td class="c_graydays c_td" >27</td>
<td class="c_graydays c_td" >28</td>
<td class="c_graydays c_td" >29</td>
<td class="c_graydays c_td" >30</td>
<td class="c_graydays c_weekend c_td" >31</td>
<td class="c_weekend c_td">1</td>
</tr>
<tr>
<td class="c_week " >45</td>
<td class="c_td">2</td>
<td class="c_td">3</td>
<td class="c_td">4</td>
<td class="c_td">5</td>
<td class="c_td">6</td>
<td class="c_weekend c_td">7</td>
<td class="c_weekend c_td">8</td>
</tr>
<tr>
<td class="c_week ">46</td>
<td class="c_td">9</td>
<td class="c_td">10</td>
<td class="c_td">11</td>
<td class="c_td">12</td>
<td class="c_td">13</td>
<td class="c_weekend c_td">14</td>
<td class="c_weekend c_td">15</td>
</tr>
<tr>
<td class="c_week" >47</td>
<td class="c_td">16</td>
<td class="c_td">17</td>
<td class="c_td">18</td>
<td class="c_expedition c_td">19
<span class="c_expeditiontext"> Thursday the 19th of November all pupils will have an expedition to damlia, our local dam. There we will learn more about insects and other wildlife near the dam. The trip will be from 08:00 to 15:00. Meet at the main entrance 07.45 and remember to pack a lunch!</span>
</td>
<td class="c_td">20</td>
<td class="c_weekend c_td">21</td>
<td class="c_weekend c_td">22</td>
</tr>
<tr>
<td class="c_week ">48</td>
<td class="c_talent c_td">23
<span class="c_talenttext"> 23rd of november is the time for the biyearly talentshow! The show will take place in auditorium A1 at 18.00 til 21.00.</span> </td>
<td class="cr_talent c_td">24
<span class="cr_talenttext"> This is a rerun of yesterdays talentshow, except this time parents are welcome as well! (at auditorium A1 18.00 - 21:00)</span>
</td>
<td class="c_td">25</td>
<td class="c_td">26</td>
<td class="c_td">27</td>
<td class="c_weekend c_td" >28</td>
<td class="c_weekend c_td">29</td>
</tr>
<tr>
<td class="c_week ">49</td>
<td class="c_td">30</td>
<td class="c_graydays c_td" >1</td>
<td class="c_graydays c_td" >2</td>
<td class="c_graydays c_td" >3</td>
<td class="c_graydays c_td" >4</td>
<td class="c_graydays c_weekend c_td" >5</td>
<td class="c_graydays c_weekend c_td" >6</td>
</tr>
</table>
</div>
</body>
</html>
"A selector's weighting is evaluated based on the components that make it up, with id's given a weighting of 100, classes with a weighting of 10, and element selectors with weighting of 1."
According to this th should weight 1 while tr:nth-child(2n+1) should weigh 11 due to pseudo class. but the background color of th is used when displayed in the browser. Can you explain why ?
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}
td,
th {
border: thin dotted gray;
padding: 5px;
}
caption {
font-style: italic;
padding-top: 8px;
}
td.center,
th.center {
text-align: center;
}
td.right,
th.right {
text-align: right;
}
th {
background-color: #cc6600;
}
tr:nth-child(2n+1) {
background-color: #fcba7a;
}
<table>
<caption>The cities I visited on my Segway'n USA travels</caption>
<tr>
<th>City</th>
<th class="center">Date</th>
<th class="center">Temprature</th>
<th class="right">Altitude</th>
<th class="right">Population</th>
<th class="center">Dinner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td class="center">June 15th</td>
<td class="center">78</td>
<td class="right">1,204 ft</td>
<td class="right">29,686</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Magic City, ID</td>
<td class="center">June 25th</td>
<td class="center">74</td>
<td class="right">5,312 ft</td>
<td class="right">50</td>
<td class="center">3/5</td>
</tr>
<tr>
<td>Bountiful, UT</td>
<td class="center">July 10th</td>
<td class="center">91</td>
<td class="right">4,226 ft</td>
<td class="right">41,173</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Last Chance, CO</td>
<td class="center">July 23rd</td>
<td class="center">102</td>
<td class="right">4,780 ft</td>
<td class="right">256</td>
<td class="center">3/5</td>
</tr>
<tr>
<td>Truth Or Consequences, NM</td>
<td class="center">August 9th</td>
<td class="center">93</td>
<td class="right">4,242 ft</td>
<td class="right">7,289</td>
<td class="center">5/5</td>
</tr>
<tr class="cellcolor">
<td>Why, AZ</td>
<td class="center">August 18th</td>
<td class="center">104</td>
<td class="right">860 ft</td>
<td class="right">480</td>
<td class="center">3/5</td>
</tr>
</table>
th and tr are two different elements, so it wouldn't effect each other.
This isn't an issue of specificity. You are dealing with two different selectors.
The first selector targets table rows.
tr:nth-child(2n+1) {
background-color: #fcba7a;
}
The other selector targets table headings.
th {
background-color: #cc6600;
}
If you want to actually measure specificity, then have them target the same elements:
tr:nth-child(2n+1) > th {
background-color: #fcba7a;
}
th {
background-color: #cc6600;
}
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}
td,
th {
border: thin dotted gray;
padding: 5px;
}
caption {
font-style: italic;
padding-top: 8px;
}
td.center,
th.center {
text-align: center;
}
td.right,
th.right {
text-align: right;
}
th {
background-color: #cc6600;
}
tr:nth-child(2n+1) > th {
background-color: #fcba7a;
}
<table>
<caption>The cities I visited on my Segway'n USA travels</caption>
<tr>
<th>City</th>
<th class="center">Date</th>
<th class="center">Temprature</th>
<th class="right">Altitude</th>
<th class="right">Population</th>
<th class="center">Dinner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td class="center">June 15th</td>
<td class="center">78</td>
<td class="right">1,204 ft</td>
<td class="right">29,686</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Magic City, ID</td>
<td class="center">June 25th</td>
<td class="center">74</td>
<td class="right">5,312 ft</td>
<td class="right">50</td>
<td class="center">3/5</td>
</tr>
<tr>
<td>Bountiful, UT</td>
<td class="center">July 10th</td>
<td class="center">91</td>
<td class="right">4,226 ft</td>
<td class="right">41,173</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Last Chance, CO</td>
<td class="center">July 23rd</td>
<td class="center">102</td>
<td class="right">4,780 ft</td>
<td class="right">256</td>
<td class="center">3/5</td>
</tr>
<tr>
<td>Truth Or Consequences, NM</td>
<td class="center">August 9th</td>
<td class="center">93</td>
<td class="right">4,242 ft</td>
<td class="right">7,289</td>
<td class="center">5/5</td>
</tr>
<tr class="cellcolor">
<td>Why, AZ</td>
<td class="center">August 18th</td>
<td class="center">104</td>
<td class="right">860 ft</td>
<td class="right">480</td>
<td class="center">3/5</td>
</tr>
</table>
So I have the following table that I have created using HTML and CSS: However, I would like the three pieces of information under Harvesting to be split divided evenly so that each cell takes the same amount of space in the Harvesting column. Right now, the table cell with electroflocculation takes up the space of 2 cells because I assigned it to temporarly do so using the rowspan attribute when it should ideally be taking up the space of 4/3 of a cell,
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<body>
</html>
You can insert another table in that and style the cells, adding borders to get it done. It's not pretty but it works.
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td rowspan="4" class="Harvesting" style="padding:0;">
<table cellpadding=0 cellspacing=0 width=100% height=100% style="text-align: center">
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Centrifugation</td>
</tr>
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Electrocoagulation</td>
</tr>
<tr>
<td class="Harvesting">Electroflocculation</td>
</tr>
</table>
</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<body>
</html>
JSFiddle
I tried every way I could think of to clear this gap but still without success. I also tried to set padding = 0 but the gap's still there too. If i zoom out, the gap will disapper, can't figure out why!
This is the css for the last td tag (the blue rows which creates the gap) :
.tdtieudecuoi{
text-align:left;
background-color: #80A5CE;
color: #FFF;
font-weight: bold;
padding:0;
}
In your thkqgiai element add the border-top attribute as follows...
.thkqgiai{
width:20% !important;
text-align:center;
color:white;
background-color: #910000;
border-top:1px solid #910000;
}
And in the TD attributes add the following to border attributes...
border-bottom:1px solid #80A5CE;
border-right:1px solid #80A5CE;
Instead of line-height you can use height:
body {
padding: 0;
}
table,
th,
td,
tr {
border-collapse: collapse;
}
.tb {
width: 500px;
}
.tb td {
/*line-height: 25px;remove line height*/
font-size: 13px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
height: 25px;/*add height*/
}
.tb th {
padding: 5px;/*increase padding to 5px*/
}
/*2 cell đầu tiên, xác định độ rộng*/
.tdkq,
.tddd {
padding: 0;
}
.tdkq {
width: 70%;
vertical-align: top;
}
.tddd {
width: 30%;
vertical-align: top;
}
/*bảng kết quả và đầu đuôi*/
.tbkq {
width: 100%;
word-wrap: break-word;
table-layout: fixed;
float: left;
margin-bottom: 0;
padding-bottom: 0;
border-right: 1px solid #CCC;
}
.tbdd {
width: 100%;
}
.tbdd td {
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
}
/*cột giải và kết quả của bảng kết quả*/
.trkq {
width: 100%;
}
.thkqgiai {
width: 20% !important;
text-align: center;
color: white;
background-color: #910000;
}
.thkqso {
width: 80% !important;
color: #CC3F51;
font-weight: bold;
font-size: 16px;
text-align: center !important;
background-color: #FFF;
}
.tdkqgiai {
text-align: center;
background-color: #F9F9F9;
color: #910000;
}
.tdkqgiaidb {
text-align: center;
color: white;
background-color: #910000;
}
.tdkqso {
text-align: center;
word-wrap: break-word !important;
border-top: 1px solid #CCC;
}
.tdkqsodb {
text-align: center;
word-wrap: break-word !important;
color: red;
border-top: 1px solid #CCC;
}
/*cột đầu và đuôi của bảng đầu đuôi*/
.thdddau {
width: 30%;
color: white;
background-color: #910000;
}
.thddduoi {
width: 70%;
color: white;
background-color: #910000;
}
/*tiêu đề cho bảng kq*/
.tieudemien {
line-height: 24px;
background-color: #80A5CE;
text-transform: uppercase;
color: #FFF;
font-weight: bold;
font-size: 12px;
width: 500px;
margin-bottom: 0;
padding-bottom: 0;
}
.tdtieudecuoi {
text-align: left;
background-color: #80A5CE;
color: #FFF;
font-weight: bold;
padding: 0;
}
<div id="body_content">
<br />
<h2 class="tieudemien"> Kết quả xổ số Miền Nam ngày 02-11-2014 (Chủ nhật)</h2>
<table class="tb">
<tbody>
<tr>
<td class="tdkq">
<table class="tbkq">
<tbody>
<tr class="trkq">
<th class="thkqgiai">Giải</th>
<th class="thkqso">Kiên Giang</th>
</tr>
<tr>
<td class="tdkqgiai">Đặc biệt</td>
<td class="tdkqsodb">048674</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhất</td>
<td class="tdkqso">38463</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhì</td>
<td class="tdkqso">37309</td>
</tr>
<tr>
<td class="tdkqgiai">Giải ba</td>
<td class="tdkqso">20091-22416</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bốn</td>
<td class="tdkqso">28539-63139-58063-48935-41701-02723-41398</td>
</tr>
<tr>
<td class="tdkqgiai">Giải năm</td>
<td class="tdkqso">1102</td>
</tr>
<tr>
<td class="tdkqgiai">Giải sáu</td>
<td class="tdkqso">5373-2976-4875</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bảy</td>
<td class="tdkqso">551</td>
</tr>
<tr>
<td class="tdkqgiai">Giải tám</td>
<td class="tdkqso">50</td>
</tr>
<tr>
<td class="tdtieudecuoi"></td>
<td class="tdtieudecuoi">Xem kết quả trực tiếp tại iKetqua.net</td>
</tr>
</tbody>
</table>
</td>
<td class="tddd">
<table class="tbdd">
<tbody>
<tr class="trkq">
<th class="thdddau">Đầu</th>
<th class="thddduoi">Đuôi</th>
</tr>
<tr>
<td class="tdkqgiai">0</td>
<td class="tdkqso">9,1,2</td>
</tr>
<tr>
<td class="tdkqgiai">1</td>
<td class="tdkqso">6</td>
</tr>
<tr>
<td class="tdkqgiai">2</td>
<td class="tdkqso">3</td>
</tr>
<tr>
<td class="tdkqgiai">3</td>
<td class="tdkqso">9,9,5</td>
</tr>
<tr>
<td class="tdkqgiai">4</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">5</td>
<td class="tdkqso">1,0</td>
</tr>
<tr>
<td class="tdkqgiai">6</td>
<td class="tdkqso">3,3</td>
</tr>
<tr>
<td class="tdkqgiai">7</td>
<td class="tdkqso">4,3,6,5</td>
</tr>
<tr>
<td class="tdkqgiai">8</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">9</td>
<td class="tdkqso">1,8</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="tb">
<tbody>
<tr>
<td class="tdkq">
<table class="tbkq">
<tbody>
<tr class="trkq">
<th class="thkqgiai">Giải</th>
<th class="thkqso">Lâm Đồng</th>
</tr>
<tr>
<td class="tdkqgiai">Đặc biệt</td>
<td class="tdkqsodb">090431</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhất</td>
<td class="tdkqso">54958</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhì</td>
<td class="tdkqso">64035</td>
</tr>
<tr>
<td class="tdkqgiai">Giải ba</td>
<td class="tdkqso">24934-62958</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bốn</td>
<td class="tdkqso">93752-22930-27309-04977-91008-21818-94007</td>
</tr>
<tr>
<td class="tdkqgiai">Giải năm</td>
<td class="tdkqso">2336</td>
</tr>
<tr>
<td class="tdkqgiai">Giải sáu</td>
<td class="tdkqso">0075-8638-4023</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bảy</td>
<td class="tdkqso">204</td>
</tr>
<tr>
<td class="tdkqgiai">Giải tám</td>
<td class="tdkqso">61</td>
</tr>
<tr>
<td class="tdtieudecuoi"></td>
<td class="tdtieudecuoi">Xem kết quả trực tiếp tại iKetqua.net</td>
</tr>
</tbody>
</table>
</td>
<td class="tddd">
<table class="tbdd">
<tbody>
<tr class="trkq">
<th class="thdddau">Đầu</th>
<th class="thddduoi">Đuôi</th>
</tr>
<tr>
<td class="tdkqgiai">0</td>
<td class="tdkqso">9,8,7,4</td>
</tr>
<tr>
<td class="tdkqgiai">1</td>
<td class="tdkqso">8</td>
</tr>
<tr>
<td class="tdkqgiai">2</td>
<td class="tdkqso">3</td>
</tr>
<tr>
<td class="tdkqgiai">3</td>
<td class="tdkqso">1,5,4,0,6,8</td>
</tr>
<tr>
<td class="tdkqgiai">4</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">5</td>
<td class="tdkqso">8,8,2</td>
</tr>
<tr>
<td class="tdkqgiai">6</td>
<td class="tdkqso">1</td>
</tr>
<tr>
<td class="tdkqgiai">7</td>
<td class="tdkqso">7,5</td>
</tr>
<tr>
<td class="tdkqgiai">8</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">9</td>
<td class="tdkqso"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="tb">
<tbody>
<tr>
<td class="tdkq">
<table class="tbkq">
<tbody>
<tr class="trkq">
<th class="thkqgiai">Giải</th>
<th class="thkqso">Tiền Giang</th>
</tr>
<tr>
<td class="tdkqgiai">Đặc biệt</td>
<td class="tdkqsodb">545150</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhất</td>
<td class="tdkqso">78387</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhì</td>
<td class="tdkqso">06256</td>
</tr>
<tr>
<td class="tdkqgiai">Giải ba</td>
<td class="tdkqso">39415-15189</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bốn</td>
<td class="tdkqso">90260-01471-58016-40732-68891-50834-93561</td>
</tr>
<tr>
<td class="tdkqgiai">Giải năm</td>
<td class="tdkqso">3390</td>
</tr>
<tr>
<td class="tdkqgiai">Giải sáu</td>
<td class="tdkqso">1556-3656-4176</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bảy</td>
<td class="tdkqso">016</td>
</tr>
<tr>
<td class="tdkqgiai">Giải tám</td>
<td class="tdkqso">23</td>
</tr>
<tr>
<td class="tdtieudecuoi"></td>
<td class="tdtieudecuoi">Xem kết quả trực tiếp tại iKetqua.net</td>
</tr>
</tbody>
</table>
</td>
<td class="tddd">
<table class="tbdd">
<tbody>
<tr class="trkq">
<th class="thdddau">Đầu</th>
<th class="thddduoi">Đuôi</th>
</tr>
<tr>
<td class="tdkqgiai">0</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">1</td>
<td class="tdkqso">5,6,6</td>
</tr>
<tr>
<td class="tdkqgiai">2</td>
<td class="tdkqso">3</td>
</tr>
<tr>
<td class="tdkqgiai">3</td>
<td class="tdkqso">2,4</td>
</tr>
<tr>
<td class="tdkqgiai">4</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">5</td>
<td class="tdkqso">0,6,6,6</td>
</tr>
<tr>
<td class="tdkqgiai">6</td>
<td class="tdkqso">0,1</td>
</tr>
<tr>
<td class="tdkqgiai">7</td>
<td class="tdkqso">1,6</td>
</tr>
<tr>
<td class="tdkqgiai">8</td>
<td class="tdkqso">7,9</td>
</tr>
<tr>
<td class="tdkqgiai">9</td>
<td class="tdkqso">1,0</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Check my comments in css.
This is a rounding anomaly. It is a bad idea to use an inner table. You should use one big table instead, something like this:
.datatable {
border-collapse: collapse;
}
.datatable td {
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: 25px;
padding: 3px;
}
.datatable .noborder {
border: hidden;
}
.datatable .titlecell {
color: #FFFFFF;
background-color: #80A5CE;
}
.datatable .subtitlehead {
background-color: #910000;
}
.datatable .subtitlecell {
color: #CE4859;
}
.datatable .maincolcell {
color: #910000;
}
.datatable .red {
color: #FF0000;
}
<table class="datatable">
<tr>
<td colspan="4" class="titlecell noborder">Kết quả xổ số Miền Nam ngày 02-11-2014 (Chủ nhật)</td>
</tr>
<tr>
<td class="subtitlehead">Giải</td>
<td class="subtitlecell">Kiên Giang</td>
<td class="subtitlehead">Đầu</td>
<td class="subtitlehead">Đuôi</td>
</tr>
<tr>
<td class="maincolcell">Đặc biệt</td>
<td class="red">048674</td>
<td class="maincolcell">0</td>
<td>9,1,2</td>
</tr>
<tr>
<td class="maincolcell">Giải nhất</td>
<td>38463</td>
<td class="maincolcell">1</td>
<td>6</td>
</tr>
<tr>
<td class="maincolcell">Giải nhì</td>
<td>37309</td>
<td class="maincolcell">2</td>
<td>3</td>
</tr>
<tr>
<td class="maincolcell">Giải ba</td>
<td>20091-22416</td>
<td class="maincolcell">3</td>
<td>9,9,5</td>
</tr>
<tr>
<td class="maincolcell">Giải bốn</td>
<td>28539-63139-58063-48935-41701-02723-41398</td>
<td class="maincolcell">4</td>
<td></td>
</tr>
<tr>
<td class="maincolcell">Giải năm</td>
<td>1102</td>
<td class="maincolcell">5</td>
<td>1,0</td>
</tr>
<tr>
<td class="maincolcell">Giải sáu</td>
<td>5373-2976-4875</td>
<td class="maincolcell">6</td>
<td>3,3</td>
</tr>
<tr>
<td class="maincolcell">Giải bảy</td>
<td>551</td>
<td class="maincolcell">7</td>
<td>4,3,6,5</td>
</tr>
<tr>
<td class="maincolcell">Giải tám</td>
<td>50</td>
<td class="maincolcell">8</td>
<td></td>
</tr>
<tr>
<td class="titlecell noborder"></td>
<td class="titlecell noborder">Xem kết quả trực tiếp tại iKetqua.net</td>
<td class="maincolcell">9</td>
<td>1,8</td>
</tr>
<tr>
<td class="subtitlehead">Giải</td>
<td class="subtitlecell">Lâm Đồng</td>
<td class="subtitlehead">Đầu</td>
<td class="subtitlehead">Đuôi</td>
</tr>
<tr>
<td colspan="4">and so on…</td>
</tr>
</table>