replicate an UI template-CodePudding

I'm working on an HTML code for which I was given a UI. I tried to do most to make it look as close as possible. But I'm stuck with the header and line spacing pieces. Here is my code.

<div>
  Hello, Alice! Here are your appointments for the day:
</div>
<div style="font-style:italic">
  **All times are Arizona Time**
</div>

<table style="border:1px solid #e9e9e9">
  <thead bgcolor="#8c8c8c" style="border-bottom:1px solid #e9e9e9; padding:none !important">
    <tr>
      <th style="width:auto">10:00AM - 10:30AM (30 MIN)</th>
      <th style="width:auto; float:right">Abc</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div style="line-height:2em">
       Topic:</div></td>
       <td><div>Resume Review</div></td>
    </tr>
    <tr>
    <td><div style="line-height:2em">Phone:</div></td>
      <td>1234567890</td>
    </tr>
    <tr>
    <td><div style="line-height:2em">Email:</div></td>
      <td>[email protected]</td>
    </tr>
    <tr>
    <td><div style="line-height:2em">Student notes:</div></td>
      <td>Hello,
        My resume is pretty ugly, I built it based on what I learned in TAPS in military out-processing.
        I will be standing by for the phone call, I missed my last one because I mixed up the appointment time zone.</td>
    </tr>

  </tbody>
</table>

Note: I need to use the inline styling, I can't use external CSS in my system.

Here is the[![enter image description here][1]][1] UI provided. Please let me know how can I match the UI and also make it responsive.

CodePudding user response：

Instead of using table for header, you can use div.

Check the below code.

<div>
  Hello, Alice! Here are your appointments for the day:
</div>
<div style="font-style:italic">
  **All times are Arizona Time**
</div>

<div style="border: 1px solid black">
  <div style="width:100%; background-color:#8c8c8c; height:20px; display:flex;justify-content:space-between;align-items:center">
    <p>10:00AM - 10:30AM (30 mins)</p>
    <p>Data</p>
  </div>

  <table>
    <tbody>
      <tr>
        <td>
          <div style="line-height:2em">
            Topic:</div>
        </td>
        <td>
          <div>Resume Review</div>
        </td>
      </tr>
      <tr>
        <td>
          <div style="line-height:2em">Phone:</div>
        </td>
        <td>1234567890</td>
      </tr>
      <tr>
        <td>
          <div style="line-height:2em">Email:</div>
        </td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>
          <div style="line-height:2em">Student notes:</div>
        </td>
        <td>Hello, My resume is pretty ugly, I built it based on what I learned in TAPS in military out-processing. I will be standing by for the phone call, I missed my last one because I mixed up the appointment time zone.</td>
      </tr>

    </tbody>
  </table>
</div>