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>
Related
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/
"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>
Initially I want to create a table header like the picture below
I have not found a solution to this problem in recent days.
I have try the vertical-aligment, text-align, table-layout:fixed to solve this problem. But still can't be dynamic like the table I want in the picture above.
.table-print tr td {
border: 1px solid black;
padding-left: 5px;
padding-right: 5px;
padding-top: 4px;
padding-bottom: 4px;
}
.table-print {
border-collapse: collapse;
width: 100%;
}
.verticalTable {
text-align:center;
white-space:nowrap;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
.verticalTable p {
margin:0 -100% ;
display:inline-block;
}
.verticalTable p:before {
content:'';
width:0;
padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
table {
text-align:center;
table-layout : fixed;
width:150px
}
<div style="width: 700px;">
<table class="arial-font table-print">
<thead>
<tr>
<td rowspan="2"><b>Number</b></td>
<td rowspan="2" width="100px"><b>Regencies</b></td>
<td rowspan="2"><b>Facilities</b></td>
<td rowspan="2"><b>Target Number of Facilities Checked</b></td>
<td colspan="2">Check up result</td>
<td colspan="8">Description of Findings</td>
<td colspan="6">Follow-up</td>
</tr>
<tr>
<td class="verticalTable"><p>Good</p></td>
<td class="verticalTable"><p>Findings</p></td>
<td class="verticalTable"><p>Licensing</p></td>
<td class="verticalTable"><p>CPOB/CPKB/CPPB</p></td>
<td class="verticalTable"><p>Unlisted Products</p></td>
<td class="verticalTable"><p>TMS Mutu/Label</p></td>
<td class="verticalTable"><p>Materials / Products are prohibited</p></td>
<td class="verticalTable"><p>Administration</p></td>
<td class="verticalTable"><p>Hygiene & Sanitation</p></td>
<td class="verticalTable"><p>Other</p></td>
<td class="verticalTable"><p>Coaching</p></td>
<td class="verticalTable"><p>Warning</p></td>
<td class="verticalTable"><p>Hard Warning</p></td>
<td class="verticalTable"><p>Temporary Dismissal of Activities</p></td>
<td class="verticalTable"><p>Termination of Activities</p></td>
<td class="verticalTable"><p>ProJustitia</p></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
I want the table to be as wide as <div style="width: 700px;">.
I hope you can help me. Thank you. :)
So I took out the white-space no wrap, changed the orientation of the text , changed width of table to 700px and removed the fix table layout:
.table-print tr td {
border: 1px solid black;
padding-left: 5px;
padding-right: 5px;
padding-top: 4px;
padding-bottom: 4px;
}
.table-print {
border-collapse: collapse;
width: 100%;
}
.verticalTable {
text-align: center;
/*white-space:nowrap;*/
transform: rotate(-90deg);
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.verticalTable p {
margin: 0 -100%;
display: inline-block;
}
.verticalTable p:before {
content: '';
width: 0;
padding-top: 110%;
/* takes width as reference, + 10% for faking some extra padding */
display: inline-block;
vertical-align: middle;
}
table {
text-align: center;
/*table-layout : fixed;*/
width: 700px;
}
<div style="width: 700px;">
<table class="arial-font table-print">
<thead>
<tr>
<td rowspan="2"><b>Number</b></td>
<td rowspan="2" width="100px"><b>Regencies</b></td>
<td rowspan="2"><b>Facilities</b></td>
<td rowspan="2"><b>Target Number of Facilities Checked</b></td>
<td colspan="2">Check up result</td>
<td colspan="8">Description of Findings</td>
<td colspan="6">Follow-up</td>
</tr>
<tr>
<td class="verticalTable">
<p>Good</p>
</td>
<td class="verticalTable">
<p>Findings</p>
</td>
<td class="verticalTable">
<p>Licensing</p>
</td>
<td class="verticalTable">
<p>CPOB/CPKB/CPPB</p>
</td>
<td class="verticalTable">
<p>Unlisted Products</p>
</td>
<td class="verticalTable">
<p>TMS Mutu/Label</p>
</td>
<td class="verticalTable">
<p>Materials / Products are prohibited</p>
</td>
<td class="verticalTable">
<p>Administration</p>
</td>
<td class="verticalTable">
<p>Hygiene & Sanitation</p>
</td>
<td class="verticalTable">
<p>Other</p>
</td>
<td class="verticalTable">
<p>Coaching</p>
</td>
<td class="verticalTable">
<p>Warning</p>
</td>
<td class="verticalTable">
<p>Hard Warning</p>
</td>
<td class="verticalTable">
<p>Temporary Dismissal of Activities</p>
</td>
<td class="verticalTable">
<p>Termination of Activities</p>
</td>
<td class="verticalTable">
<p>ProJustitia</p>
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
I'd recommend looking into writing-mode for the vertical text.
The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
MDN
You will still have to work on the font-size since you are trying to cram an awful lot into 700px...but this should make it more manageable.
.table-print tr td {
border: 1px solid black;
font-size: 14px;
}
.table-print {
border-collapse: collapse;
width: 100%;
}
.verticalTable {
text-align: center;
}
td b,
.verticalTable p {
writing-mode: vertical-lr;
transform: rotate(180deg);
}
table {
table-layout: fixed;
width: 100%;
text-align: center;
}
<div style="width: 700px;">
<table class="arial-font table-print">
<thead>
<tr>
<td rowspan="2"><b>Number</b></td>
<td rowspan="2"><b>Regencies</b></td>
<td rowspan="2"><b>Facilities</b></td>
<td rowspan="2"><b>Target Number of Facilities Checked</b></td>
<td colspan="2">Check up result</td>
<td colspan="8">Description of Findings</td>
<td colspan="6">Follow-up</td>
</tr>
<tr>
<td class="verticalTable">
<p>Good</p>
</td>
<td class="verticalTable">
<p>Findings</p>
</td>
<td class="verticalTable">
<p>Licensing</p>
</td>
<td class="verticalTable">
<p>CPOB/CPKB/CPPB</p>
</td>
<td class="verticalTable">
<p>Unlisted Products</p>
</td>
<td class="verticalTable">
<p>TMS Mutu/Label</p>
</td>
<td class="verticalTable">
<p>Materials / Products are prohibited</p>
</td>
<td class="verticalTable">
<p>Administration</p>
</td>
<td class="verticalTable">
<p>Hygiene & Sanitation</p>
</td>
<td class="verticalTable">
<p>Other</p>
</td>
<td class="verticalTable">
<p>Coaching</p>
</td>
<td class="verticalTable">
<p>Warning</p>
</td>
<td class="verticalTable">
<p>Hard Warning</p>
</td>
<td class="verticalTable">
<p>Temporary Dismissal of Activities</p>
</td>
<td class="verticalTable">
<p>Termination of Activities</p>
</td>
<td class="verticalTable">
<p>ProJustitia</p>
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
You can catch up on my fiddle jsfiddle.net/alyeah/ny1h546d/
I'm making a table and I got a few problems that I can't solve without help,namely:
I need all <td> to be the same height as it's respective <tr>. height:100% doesn't work for all <td> for some reason, however fixed height works.
<tbody> is smaller than <table> itself which leads to the gap on the right side.
I want all borders to be 1px, but some of them are more bold. How do I make them all uniform?
https://codepen.io/NoOneKnowsWhoIam/pen/rzweRV
* {
box-sizing: border-box;
}
.caption {
background: yellow;
padding: 5px;
}
table {
border-collapse: collapse;
border: 1px solid black;
width: 400px;
display: block;
margin: 0 auto;
background: grey;
}
.quarter-width {
width: 25%;
}
.half-width {
width: 50%;
}
.third-width {
width: 33.33333333333333%;
}
td {
padding: 5px;
width: 100%;
height: 100%;
border: 1px solid black;
display: inline-block;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
<table>
<tbody>
<caption class="caption"><b>ST CLARE ZNNR5</b></caption>
<tr>
<td><b>11:39 01.07.2017</b></td>
</tr>
<tr>
<td class="half-width"><b>MMSI 235002514</b></td>
<td class="half-width text-right"><b>IMO 09236949</b></td>
</tr>
<tr>
<td>
<b>
Пассажирское судно, в пути<br>
86 м × 18 м × 2.5 м
</b>
</td>
</tr>
<tr>
<td class="half-width">
Координаты<br>
<b>50 47. 2000 N</b><br>
<b>001 06. 4000 W</b>
</td>
<td class="half-width text-right">
Время с момента получения отчета<br>
<b>9 с</b>
</td>
</tr>
<tr>
<td class="half-width">
Пункт назначения<br>
<b>Port Fish</b>
</td>
<td class=" fixim half-width text-right">
Расчетное время прибытия<br>
<b>
2017-07-01 17:15
<b>(UTC)</b>
</b>
</td>
</tr>
<tr class="text-center">
<td class="quarter-width">
COG<br>
<b>329°</b>
</td>
<td class="quarter-width">
COG<br>
<b>329°</b>
</td>
<td class="quarter-width">
HDG<br>
<b>323°</b>
</td>
<td class="quarter-width">
LOG<br>
<b>_</b>
</td>
</tr>
<tr>
<td><b>Спланированный маршрут</b></td>
</tr>
<tr>
<td class="third-width"><b>ПТ №1</b></td>
<td class="third-width">
Tдв<br>
<b>12:57:19</b>
</td>
<td class="third-width">
D<br>
<b>40.162 миль</b>
</td>
</tr>
<tr>
<td>Рассчитать маршрут</td>
</tr>
</tbody>
</table>
Delete display: inline-block; from the rule for td - this cancels their table-cell property, causing the problems you describe:
* {
box-sizing: border-box;
}
.caption {
background: yellow;
padding: 5px;
}
table {
border-collapse: collapse;
border: 1px solid black;
width: 400px;
display: block;
margin: 0 auto;
background: grey;
}
.quarter-width {
width: 25%;
}
.half-width {
width: 50%;
}
.third-width {
width: 33.33333333333333%;
}
td {
padding: 5px;
width: 100%;
height: 100%;
border: 1px solid black;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
<table>
<tbody>
<caption class="caption"><b>ST CLARE ZNNR5</b></caption>
<tr>
<td><b>11:39 01.07.2017</b></td>
</tr>
<tr>
<td class="half-width"><b>MMSI 235002514</b></td>
<td class="half-width text-right"><b>IMO 09236949</b></td>
</tr>
<tr>
<td>
<b>
Пассажирское судно, в пути<br>
86 м × 18 м × 2.5 м
</b>
</td>
</tr>
<tr>
<td class="half-width">
Координаты<br>
<b>50 47. 2000 N</b><br>
<b>001 06. 4000 W</b>
</td>
<td class="half-width text-right">
Время с момента получения отчета<br>
<b>9 с</b>
</td>
</tr>
<tr>
<td class="half-width">
Пункт назначения<br>
<b>Port Fish</b>
</td>
<td class=" fixim half-width text-right">
Расчетное время прибытия<br>
<b>
2017-07-01 17:15
<b>(UTC)</b>
</b>
</td>
</tr>
<tr class="text-center">
<td class="quarter-width">
COG<br>
<b>329°</b>
</td>
<td class="quarter-width">
COG<br>
<b>329°</b>
</td>
<td class="quarter-width">
HDG<br>
<b>323°</b>
</td>
<td class="quarter-width">
LOG<br>
<b>_</b>
</td>
</tr>
<tr>
<td><b>Спланированный маршрут</b></td>
</tr>
<tr>
<td class="third-width"><b>ПТ №1</b></td>
<td class="third-width">
Tдв<br>
<b>12:57:19</b>
</td>
<td class="third-width">
D<br>
<b>40.162 миль</b>
</td>
</tr>
<tr>
<td>Рассчитать маршрут</td>
</tr>
</tbody>
</table>
I have a complicated set of table rows with colspans and rowspans all over the shop. All works fine except for the bottom row in Internet Explorer which forces it's height to be the same as the previous row, which is set to rowspan="2". How can I fix this?
Also, the layout needs to be a table because a PDF generator uses it and that requires tables. Ideally the HTML layout wouldn't change at all, but it can change if it needs to.
Below is the code. Look at it in Google Chrome to see how it should be displaying in IE.
.MhrPayslipDetail {
display: block;
font-family: sans-serif;
font-size: 16px;
padding: 20px 60px;
text-align: center;
}
.MhrPayslipDetail-payslip {
background-color: #fff;
border-collapse: separate;
border-spacing: 10px;
width: 100%;
}
.MhrPayslipDetail-label {
background-color: #c1c1c1;
border: 1px solid #c1c1c1;
border-radius: 5px;
font-weight: bold;
padding: 4px;
text-align: left;
vertical-align: middle;
}
.MhrPayslipDetail-cell,
.MhrPayslipDetail-cellRight {
background-color: #fff;
border: 1px solid #c1c1c1;
border-radius: 5px;
padding: 4px;
text-align: left;
vertical-align: middle;
}
.MhrPayslipDetail-cellRight {
text-align: right;
}
.MhrPayslipDetail-list {
border: 0;
border-collapse: collapse;
width: 100%;
}
.MhrPayslipDetail-listCell,
.MhrPayslipDetail-listLabel,
.MhrPayslipDetail-listCellHeader {
border: 0;
padding: 1px;
text-align: left;
vertical-align: middle;
}
.MhrPayslipDetail-listCellRight,
.MhrPayslipDetail-listCellHeaderRight {
border: 0;
padding: 1px;
text-align: right;
vertical-align: middle;
}
.MhrPayslipDetail-listLabel,
.MhrPayslipDetail-listCellHeader {
font-weight: bold;
width: 50%;
}
.MhrPayslipDetail-details {
font-size: .9em;
}
.MhrPayslipDetail-paymentsDetails,
.MhrPayslipDetail-deductionsDetails {
height: 21em;
vertical-align: top;
}
.MhrPayslipDetail-thisPeriodDetails,
.MhrPayslipDetail-yearToDateDetails {
height: 10em;
vertical-align: top;
}
<div class="MhrPayslipDetail">
<table class="MhrPayslipDetail-payslip">
<tbody>
<tr>
<td colspan="3" rowspan="3" class="MhrPayslipDetail-cell MhrPayslipDetail-paymentsDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<thead>
<tr>
<th class="MhrPayslipDetail-listCellHeader">Description</th>
<th class="MhrPayslipDetail-listCellHeaderRight">U/T</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Rate</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Cash</th>
</tr>
</thead>
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Test Basic Pay</td>
<td class="MhrPayslipDetail-listCellRight"></td>
<td class="MhrPayslipDetail-listCellRight"></td>
<td class="MhrPayslipDetail-listCellRight">200.00</td>
</tr>
</tbody>
</table>
</td>
<td colspan="2" rowspan="3" class="MhrPayslipDetail-cell MhrPayslipDetail-deductionsDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<thead>
<tr>
<th class="MhrPayslipDetail-listCellHeader">Description</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Cash</th>
</tr>
</thead>
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Tax</td>
<td class="MhrPayslipDetail-listCellRight">25.40</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">NI</td>
<td class="MhrPayslipDetail-listCellRight">24.00</td>
</tr>
</tbody>
</table>
</td>
<td colspan="2" class="MhrPayslipDetail-cell MhrPayslipDetail-thisPeriodDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<thead>
<tr>
<th class="MhrPayslipDetail-listCellHeader">Description</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Cash</th>
</tr>
</thead>
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Taxable Pay</td>
<td class="MhrPayslipDetail-listCellRight">200.00</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Employers National Insurance</td>
<td class="MhrPayslipDetail-listCellRight">27.60</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Niable Pay</td>
<td class="MhrPayslipDetail-listCellRight">200.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th colspan="2" class="MhrPayslipDetail-label">Year-to-date</th>
</tr>
<tr>
<td colspan="2" rowspan="2" class="MhrPayslipDetail-cell MhrPayslipDetail-yearToDateDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Taxable Pay</td>
<td class="MhrPayslipDetail-listCellRight">7,200.00</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">NI</td>
<td class="MhrPayslipDetail-listCellRight">622.08</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Tax</td>
<td class="MhrPayslipDetail-listCellRight">25.40</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Niable Pay</td>
<td class="MhrPayslipDetail-listCellRight">7,200.00</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Employers National Insurance</td>
<td class="MhrPayslipDetail-listCellRight">713.73</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th class="MhrPayslipDetail-label">Payments</th>
<td class="MhrPayslipDetail-cellRight" colspan="2">200.00</td>
<th class="MhrPayslipDetail-label">Deductions</th>
<td class="MhrPayslipDetail-cellRight">49.40</td>
</tr>
</tbody>
</table>
</div>
UPDATE
Since submitting this question I have tried using sub-tables to separate out the columns, however I found that when I did that I wasn't able to get them to line up correctly due to border spacing and the PDF generator's lack of being able to use border-collapse:collapse;.
As an FYI, this is the PDF generator the system is using.