Ereigniskarte in HTML 5

Question

Ich bin neu in HTML 5 Entwicklung. Ich habe Anforderung, Ereignisliste UI wie unten Bild zu entwickeln. Könnten Sie mir bitte helfen

Answer 1

Versuchen Sie diese JSFiddle. Ich bin mir nicht sicher, ob Sie danach suchen.

HTML:

<table class="tg"> 
    <tr> 
    <th style="color:#858C93;font-size:15px" class="tg-031e">12/14/2018</th> 
    <th style="float:left;" class="tg-031e"><strong>EVENT NAME...............</strong> 
    </th> 
    </tr> 
    <tr> 
    <td class="tg-yw4l"><span>12:00</span><small>AM</small></td> 
    <td class="tg-yw4l">The Year Celebration starts on the 31st night</td> 
    </tr> 
</table> 

CSS:

.tg {border-collapse:collapse;border-spacing:0;border-width:1px;border-style:solid;} 
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:0px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;} 
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;} 
.tg .tg-yw4l{vertical-align:middle} 
span {font-size:25px;color:#FF7F27;} 
small {color:#FF7F27;}