So, I have the code below and ideally the goal is to have any images present hit a maximum width of 120px for browsers with viewports of 641px+ and then only a maximum width of 27px. The odd part is that if I remove the resizing coding and put it in a separate code block at the bottom of my site it will resize all images on the page, but not how it's supposed to. When I remove the portion of coding, the coding seems to try and work a little more, but not exactly. Maybe there's a different way to do the resizing coding?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#media screen and ( min-width: 641px ){
img {
width: 120px;
height: auto;
}
}
#media screen and ( max-width: 640px ){
img {
width: 27px;
height: auto;
}
</style>
</head>
<body>
<!--VGC Year-->
<p style="font-size: 30px">
<b>
VGC 2015
</b>
</p>
<!-- Acronym-->
<table>
<tr>
<td>
<b style="font-size: 20px">
CHALK - - -
</b>
</td>
<!--Arconym Pokemon-->
<td>
<img src="https://www.serebii.net/art/th/488.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/485.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/591.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/645-s.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/115-m.png">
</td>
</tr>
</table>
<!--Arconym descption-->
<p>
This acronym refers to a five Pokemon core consisting of Cresselia, Heatran, Amoonguss, Landorus-Therian, and Mega Kangaskhan with the sixth and final Pokemon being up to a Trainer's personal preference. This sixth Pokemon was typically added on to the end of the acronym and was considered a variant on this standard core. For example, Thundurus-Incarnate was a popular sixth option resulting in the term CHALK-T.
</p>
<!-- Acronym-->
<table>
<tbody>
<tr>
<td>
<p style="font-size: 20px">
<b>
Japan Sand - - -
</b>
</p>
</td>
<!--Arconym Pokemon-->
<td>
<img src="https://www.serebii.net/art/th/373-m.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/248.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/530.png">
</td>
<td>
<img src="https://www.serebii.net/art/th/591.png">
</td>
</tr>
</tbody>
</table>
<!--Arconym descption-->
<p>
Japan Sand was a team popularized in Japan - hence the name - and almost always featured the four Pokemon core of Mega Salamence, Tyranitar, Excadrill and Amoonguss. A common fifth Pokemon added to the team was Belly Drum Huge Power Azumarill to pair with Amoonguss.
</p>
</body>
</html>
Related
I want to create my Resume in HTML
Is the dimension of the page good as a A4?
How to Position the text like in picture, but I want without divs?
And How to make the page & the text fixed like a PDF or Word so when I print it, it be conform?
This is my Code:
#name {
font-size: 26pt;
font-family: garamond;
font-weight: bold;
display: inline;
}
/*ignore line break*/
.title {
font-size: 12pt;
}
.sous-title {
font-weight: bold;
}
body {
font-size: 11pt;
font-family: Verdana;
color: rgb(64, 64, 64);
max-width: 44em;
/*3ordh*/
padding: 65 45px;
margin: 6em auto 19em;
position: relative;
box-shadow: 0 0.3em 1em rgb(110, 110, 110);
height: 90em
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="portfolionotabs.css">
<title>Resume</title>
</head>
<body>
<p id="name">REDACTED <br>REDACTED</p>
REDACTED REDACTEDAdress Adress EMailEMailEMail
<br> REDACTED0000000
<hr />
<p class="title">Objective</p>
A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to work
with customers and satisfy their needs.
<hr />
<p class="title">Education</p>
ISGS
<p class="sous-title">IT management</p>
September 2014 - July 2017<br> Graduated: No<br> Completed 2nd year
<hr /> CSFMTS
<p class="sous-title"></p>International trade</p>
September 2019 - Current<br> Graduated: Yes<br> Currently on internship
<hr />
<p class="title">Work experience</p>
<p class="sous-title"></p>REDACTED</p>
REDACTED<br> October 2021 - November 2021<br>
<hr />
<p class="title">Languages</p>
English •••••<br> French •••••<br> Italian •••••
<hr />
<p class="title">Skills</p>
Problem-solving Reasonably experienced<br> Communication Reasonably experienced<br> Adaptability
<br> Active Listening
<hr />
<p class="title">Technical skills</p>
Ms-office Advanced level<br> Ciel 2019 Advanced level<br>
<hr />
<p class="title">Hobbies and interests</p>
Exercising and healthcare<br> Yoga and meditation<br> Volunteering
</body>
</html>
Maybe I can answer two of your questions.
How to Position the text like in picture, but i want without divs..?
Divs are really not too difficult and a core concept of html, so it would be beneficial to learn how to use them. You can find some good explanation on MDN Web Docs div details to help you. But since you ask for an alternate, I can offer one: Tables. Now, I personally do not like to use tables, but it can do the job. A warning is that tables can make it more difficult to have a responsive site that works well on small screens. But since you wish to mimic a printed document it would work for that.
Example:
<hr />
<table>
<tr>
<td>
<p class="title">Objective</p>
</td>
<td>A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to
work with customers and satisfy their needs.</td>
</tr>
</table>
<hr />
That's a bit basic and doesn't match the style you want, but gives you the idea of how to place the two columns side by side. Of course you will need to add the appropriate properties to set the cell sizes, padding, and spacing to what you want it to be.
The basic principle is use <tr> for each row and <td> for each cell in the row. Then build like you would a spreadsheet or table in a word document.
And how to make the page and the text fixed like a pdf or word so when i print it, it be conform?
If you use tables, you can use a fixed width (in pixels). That can accomplish this. A good reference is Fixed-width tables with text-overflow on MDN. But again, a warning. This approach can cause difficulty on smaller screens; it is not a responsive design.
Edit: In the other answer, the user updated your entire code into tables for you. But to make it always print the same you may need to add fixed widths. I do hope my answer explains to you way tables are an option and the possible issue with them.
#name{
font-size: 26pt;
font-family: garamond;
font-weight: bold;
display:inline;
} /*ignore line break*/
.title{font-size: 12pt;}
.sous-title{font-weight: bold;}
body{
padding: 10px;
font-size: 11pt;
font-family: Verdana;
color: rgb(64, 64, 64);
max-width: 44em; /*3ordh*/
padding: 65 45px;
margin: 6em auto 19em;
position: relative;
box-shadow: 0 0.3em 1em rgb(110, 110, 110);
height: 90em
}
.fright{
float: right;
margin: 0 20px;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="portfolionotabs.css">
<title>Resume</title>
</head>
<body>
<p id="name">REDACTED <br>REDACTED</p>
<span class="fright">
REDACTED<br>
REDACTED
</span>
<span class="fright">
REDACTED<br>
REDACTED
</span>
<hr />
<table>
<tr>
<td valign="top" width="230px">Objective</td>
<td>
A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to work with customers and satisfy their needs.
</td>
<tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td valign="top">Education</td>
<td>
ISGS<br>
<b>IT management</b><br>
September 2014 - July 2017<br>
Graduated: No<br>
Completed 2nd year
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td></td>
<td>
CSFMTS<br>
<b> International trade</b><br>
September 2019 - Current<br>
Graduated: Yes<br>
Currently on internship
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Work experience</td>
<td>
<b>REDACTED</b><br>
REDACTED<br>
October 2021 - November 2021<br>
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Languages</td>
<td>
English •••••<br>
French •••••<br>
Italian •••••
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Skills</td>
<td>
Problem-solving Reasonably experienced<br>
Communication Reasonably experienced<br>
Adaptability<br>
Active Listening
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Technical skills</td>
<td>
Ms-office Advanced level<br>
Ciel 2019 Advanced level<br>
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Hobbies and interests</td>
<td>
Exercising and healthcare<br>
Yoga and meditation<br>
Volunteering
</td>
</tr>
</table>
</body>
I want to show the below html content centered on the page:
Date : xxxx/xx/xx
Time : 12:22
xx : xxxxx
xxxxx : xxxxx
x : xxxxxxx
code:
<!DOCTYPE html>
<html>
<head><title>Notification</title></head>
<body style="text-align:center;border:1px solid black">
<br>
<p style="text-algin:center">
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
<p style="text-align:right">Head of the Department</p>
</body>
The result of my code:
Day:Friday
Date:December 5,1997
Time:3.00pm
Lr:Dr.Nicolas Lam
Venue:WC 311
use table tag to do proper alignment
Here's the core for what you want to do
<!DOCTYPE html>
<html>
<head><title>Notification</title></head>
<body style="text-align:center;border:1px solid black">
<b>Community College(Autonomous)</b>
<br>
<span>HKUSPACE</span>
<br>
<b>Department of Computer Science</b>
<br>
<b>Seminar on HTML Programming</b>
<br>
<br>
<span>The Department of Computer Science, in its continuing effort to impart knowledge on the latest topic to students, is arranging the following seminar of HTML programming.</span>
<br>
<p style="text-align:center">
<table align="center">
<tr>
<td>Date</td>
<td> : </td>
<td>xxxx/xx/xx</td>
</tr>
<tr>
<td>Time</td>
<td> : </td>
<td>12:22</td>
</tr>
<tr>
<td>xx</td>
<td> : </td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td> : </td>
<td>xxxxx</td>
</tr>
<tr>
<td>x</td>
<td> : </td>
<td>xxxxxxx</td>
</tr>
</table>
</p>
<p style="text-align:right">Head of the Department</p>
</body>
<html>
First a couple of small notes:
Don't use inline styling. Put your styles into a <style> block or into a separate CSS file loaded with a <link> tag.
The <b> tag is deprecated in HTML 5. You should use another tag, such as <em> or <strong>. I have used <strong> in my example below.
To align things the way you want, you need to use a table. Here is a working example with the above items incorporated, and using a table to format the 3-column block you are trying to achieve.
I also made a fiddle.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
border: 1px solid black;
}
.table-div {
display: table;
margin: 0 auto;
}
.left-align {
text-align: left;
}
.right-align {
text-align: right;
}
</style>
</head>
<body>
<strong>Community College(Autonomous)</strong>
<br>
<span>HKUSPACE</span>
<br>
<strong>Department of Computer Science</strong>
<br>
<strong>Seminar on HTML Programming</strong>
<br>
<br>
<span>The Department of Computer Science, in its continuing effort to impart knowledge on the latest topic to students, is arranging the following seminar of HTML programming.</span>
<br>
<div class="table-div">
<table class="left-align">
<tr>
<td>Day</td><td>:</td><td>Friday</td>
</tr>
<tr>
<td>Date</td><td>:</td><td>December 5, 1997</td>
</tr>
<tr>
<td>Time</td><td>:</td><td>3.00pm</td>
</tr>
<tr>
<td>Speaker</td><td>:</td><td>Dr. Nicolas Lam</td>
</tr>
<tr>
<td>Venue</td><td>:</td><td>WC 311</td>
</tr>
</table>
</div>
<p class="right-align">Head of the Department</p>
</body>
</html>
Easier way to do this is put the data you want to center in some block element and center that block instead.
I changed from text-align: center; to text-align: left; and added margin: auto; and display: table; to div element.
(and also moved text-align to div too)
So you must change from:
<p style="text-algin:center">
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
to:
<div style="margin: auto; display: table; text-align: left;">
<p>
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
</div>
and you will get the result as you want :)
Note: you can change the width to any value that you want.
result (image)
edited: some typo and change from setting width to use table instead.
Put all of the text inside a div and center the div
Put all of the text inside an additional <p> and center the new <p>
<p style="text-align:center">
<p style="text-align:left">
Day:Friday
<br>
Date:December 5,1997
<br>
Time:3.00pm
<br>
Speaker:Dr.Nicolas Lam
<br>
Venue:WC 311
</p>
</p>
PS: don't use inline styles
I'm having a bit of a problem putting together a HTML email which will render properly in outlook, i had initially got everything working fine through the use of list items and the list-style-image Property, but that isn't supported in outlook.
Basically, i have a table with 2 rows in it, the left hand side one has an 11pixel image being using as a custom bullet point, and on the right hand side is some text.
My problem is no matter what i do i cannot get the column on the left to maintain an 11 pixel width, the columns ALWAYS split equally down the middle of the table. Help please?
HTML
<table>
<tr>
<td>
<img src="Small Image" />
</td>
</tr>
<tr>
<td class="red">
<h4>
TEXT
</h4>
</td>
</tr>
<tr>
<td class="webinar">
<table>
<tr>
<td class="left">
<img src="/Bullet.png" />
</td>
<td class="right">
<p>
TEXT
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
td.webinar .left {
width:11px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar .right {
width:144px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar {
background-color:#ccc6d2;
border:1px solid #313131;
padding-top:8px;
padding-bottom:10px;
}
you want to use css styles in emails? then you are going to have a bad time in most clients..
try to:
<table>
<tr>
<td width="144px">
<img src="Small Image" />
</td>
</tr>
</table>
in email templates you should always apply inline styling as "oldschool" as possible!
I have a table of links for an image gallery that I want to be able to fit to the screen size if the window size is reduced. At the moment it just stays the same size.
<table class="images" id="albums">
<tr>
<td>
<a href="academy-blitz-may-2014.html" ><img id="academy-blitz-may-2014" src="img/album-covers/academy-blitz-may-2014.jpg" title="Academy Blitz May 2014"/></a>
</td>
<td>
<a href="academy-blitz-october-2014.html" ><img id="academy-blitz-october-2014" src="img/album-covers/academy-blitz-october-2014.jpg" title="Academy Blitz October 2014"/></a>
</td>
<td>
<a href="academy-blitz-november-2012.html" ><img id="academy-blitz-november-2012" src="img/album-covers/academy-blitz-november-2012.jpg" title="Academy Blitz November 2012"/></a>
</td>
<td>
<a href="summer-camp-2014.html" ><img id="summer-camp-2014" src="img/album-covers/summer-camp-2014.jpg" title="Summer Camp 2014"/></a>
</td>
<td>
<a href="academy-on-tour-tullamore-2015.html" ><img id="academy-on-tour-tullamore-2015" src="img/album-covers/academy-on-tour-tullamore-2015.jpg" title="Academy On Tour - Tullamore 2015"/></a>
</td>
</tr>
<tr>
<td>
Academy Blitz May 2014
</td>
<td>
Academy Blitz October 2014
</td>
<td>
Academy Blitz November 2012
</td>
<td>
Summer Camp 2014
</td>
<td>
Academy On Tour - Tullamore 2015
</td>
</tr>
<tr>
<td>
<a href="u18s-v-mullingar-2013.html" ><img id="u18s-v-mullingar-2013" src="img/album-covers/u18s-v-mullingar-2013.jpg" title="U18's V Mullingar 2013"/></a>
</td>
<td>
<a href="u18s-league-win-2014.html" ><img id="u18s-league-win-2014" src="img/album-covers/u18s-league-win-2014.jpg" title="U18's League Win 2014"/></a>
</td>
<td>
<a href="u12s-v-tullamore-2014.html" ><img id="u12s-v-tullamore-2014" src="img/album-covers/u12s-v-tullamore-2014.jpg" title="U12's V Tullamore 2014"/></a>
</td>
<td>
<a href="u11-lions-semi-final-2015.html" ><img id="u11-lions-semi-final-2015" src="img/album-covers/u11-lions-semi-final-2015.jpg" title="U11 Lions Semi-Final 2015"/></a>
</td>
<td>
<a href="easter-camp-2015.html" ><img id="easter-camp-2015" src="img/album-covers/easter-camp-2015.jpg" title="Easter Camp 2015"/></a>
</td>
</tr>
<tr>
<td>
U18's v Mullingar 2013
</td>
<td>
U18's League Win 2014
</td>
<td>
U12's v Tullamore 2014
</td>
<td>
U11 Lions Semi-Final 2015
</td>
<td>
Easter Camp 2015
</td>
</tr>
</table>
And my CSS:
#albums {width:70%;}
#albums img {opacity: 0.9;}
#albums img:hover {opacity:1.0;}
#albums td {text-align:center;padding-top:14px;padding-right:14px;padding-bottom:0px;padding-left:14px;}
Whenever I try to reduce the size, all other features fit to the screen size, but the gallery stays the same size, despite using the same code for the other features (width:%).
This is what it looks like full screen:
http://i.imgur.com/wbFzPnS.jpg
And this is what it looks like when I reduce the window size:
http://i.imgur.com/hNfBFD5.jpg
You need to make the images responsive
#albums img {
width:100%;
max-width:100%;
}
However the padding, text and the fact its a table will stop it from downsizing all the way.
Also semantically using a table in this way is quite bad. It looks like you're using it solely for layout purposes. You could achieve the same effect with a few divs and you'll have a lot more flexibility and be semantically correct.
Here's a codepen with a better way of doing it. You would probably want to turn it into a 2 column or single column layout with a media query around 600px.
I've the below HTML Code.
<div class="main">
<div class="para">
<a name="I1-87A"></a><span class="phrase">I1/87A</span> <span class="font-style-bold">Punitive costs</span>—Proceedings which are an abuse of process in that they
are scandalous or vexacious or have been initiated maliciously or for an ulterior
motive may not only be struck out, the petitioner may also face an order to pay
costs on an indemnity basis (<span class="font-style-italic">Re Tang Hong Yuen, ex p.
Leung Yee Cheung</span> [2004] H.K.E.C. 972 <span class="font-style-italic">Bank of
China (Hong Kong) Ltd v. Lee Lin Heung</span> [2002] 1 H.K.L.R.D. A3 and
<span class="font-style-italic">Choy Yee Chun v. Bond Star Development Ltd</span>
[1997] H.K.L.R.D. 1327). This provides a salutory reminder to practitioners that
the bankruptcy jurisdiction should not be lightly invoked nor looked to for the
determination of disputes between parties.
</div>
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="3">
<colgroup>
<col class="colname-c1 colwidth-8.80%"></col>
<col class="colname-c2 colwidth-12.68%"></col>
<col class="colname-c3 colwidth-59.33%"></col>
<col class="colname-c3 colwidth-19.19%"></col>
</colgroup>
<tbody>
<tr>
<td class="null"><div class="para"><a name="I1-89"></a>
<span class="phrase">I1/89</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Stages of a voluntary arrangement</span>
</div>
</td>
<td rowspan="align-center">
<div class="para">
<span class="font-style-bold">Procedures</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">of the Bankruptcy Ordinance (BO)/Rule of the Bankruptcy Rules (BR)/Form in the Bankruptcy (Forms) Rules (BFR)</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"><a name="I1-89A"></a>
<span class="phrase">I1/89A</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Debtor prepares proposal</span>
</div>
</td>
<td>
<div class="para">The proposal should include:</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">BR 122B and C</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"><a name="I1-89B"></a>
<span class="phrase">I1/89B</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Notice to intended nominee</span>
</div>
</td>
<td>
<div class="para">Written notice of the debtor’s proposal and a copy of the proposal is passed to the intended nominee or a person authorised to take delivery on his behalf (BR 122D (1) and (2)). If the nominee agrees to act, he shall cause a copy of the notice to be endorsed to the effect that it has been received by him on a specified date (BR 122D(3)). The copy of the notice shall be returned by the intended nominee to the debtor (BR 122D(4)).</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">BR 122D BFR 167 </span>
<span class="font-style-italic">[Notice to Intended Nominee]</span>
</div>
</td>
</tr>
<tr>
<td class="auto-style1">
<div class="para">
<a name="I1-89C"></a>
<span class="phrase">I1/89C</span>
</div>
</td>
<td class="auto-style1">
<div class="para">
<span class="font-style-bold">Application for an interim order</span>
</div>
</td>
<td class="auto-style1">
<div class="para">An application for an interim order may be made when the debtor intends to make a proposal and the proposal must provide for a nominee to act in relation to the voluntary arrangement for the purposes of supervising its implementation (BO 20A). Two or more persons can be appointed as joint nominees in a voluntary arrangement. The court normally will not object to any proposal to appoint solicitors and certified public accountants provided such persons are able to demonstrate sufficient experience and knowledge in dealing with insolvency matters. For persons not coming from these two professions, a more cautious approach will be taken (see <span class="font-style-italic">Re Ng Hing Kwong</span> [2003] 3 H.K.L.R.D. 230).</div>
</td>
<td class="auto-style1">
<div class="para">
<span class="font-style-bold">BO 20A BFR 165 </span>
<span class="font-style-italic">[Application for Interim Order]</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"></div>
</td>
<td class="null"><div class="para"></div>
</td>
<td>
<div class="para">An application for an interim order may be made by:</div>
</td>
<td class="null"><div class="para"></div>
</td>
</tr>
</tbody>
</table>
</div>
here, i want to hide the first cell by using a css attribute and set the number in table first cell equal to the number in the para above. please refer the below screenshot.
There is a gap between the number start and also there is an extra cell(for which i gave class as 'null'), it should be hidden please refer to my second screen shot. please let me know how i can do this.
JsFiddle is here
you can modifie your css like this :
.main{
margin-left: 5.0em;
margin-right: 0.2em;
}
table.frame-all{
width: 97%;
border-collapse: collapse;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 2em;
padding: 10px 10px 10px 10px;
}
.frame-all td {
border: 0.080em solid;
padding-right: 0.4em;
padding: 7px 7px 7px 7px;
}
td.null {
border:none; !important
}
.para span.phrase {
text-indent: 0em;
font-weight: bold;
}
you may need some "adjustment", but it seems to be what you need.
Padding properties caused the gap between first row, and dates, also, i used "border : none;" on this first column to hide the border around the date. (it exist but you don't see it)
I Hope it may help you,
Best regards