How to set up th width without disturbing td-CodePudding

I'm writing a code where I'm creating a table in HTML. And here my challenge is, If I try to get the header(time range) in one line by increasing the width, the width of tds are also changing. Here is my code.

<table style="border:1px solid #8c8c8c;width:100%;border:1px solid #8c8c8c;width:100%;border-collapse:collapse;margin-bottom:1.5em">
  <thead>
    <tr style="border-bottom:1px solid black;background-color:#e9e9e9;font-size:16px">
      <th width="24%">
        <div style="width:auto">10:35PM - 11:05PM (30 MIN)</div>
      </th>
      <th style="text-align:right;padding-right:1em;margin-right:1em;" height="40px;">John Williams</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em;">
        <div style="line-height:2em;font-weight:bold"> Topic:</div>
      </td>
      <td valign="baseline">
        <div>Resume Review</div>
      </td>
    </tr>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em">
        <div style="line-height:2em;font-weight:bold">Phone:</div>
      </td>
      <td valign="baseline">123445567</td>
    </tr>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em">
        <div style="line-height:2em;font-weight:bold">Email:</div>
      </td>
      <td valign="baseline"><a href="mailto:[email protected]" target="_blank">[email protected]</a></td>
    </tr>
    <tr>
      <td valign="baseline">
        <div style="line-height:2em;width:auto;font-weight:bold">Student notes:</div>
      </td>
      <td valign="baseline"> some junk test text</td>
    </tr>
  </tbody>
</table>

Note: I'm not allowed to use an external CSS file. Please let me know how can I fix this.

Thanks

CodePudding user response：

if you want first cells of different width, they need to span different amount of columns, else it will fill only one column.

You have a 2 column table, via colspan, you may turn it into a 3 columns.

thead : <th colspan="2">th 24%</th><th> use space left </th> = 3 columns with the first cell going through 2 columns

tbody : <td>15%</td><td colspan="2"> space left</td> = 3 columns again.

The second column will be 24% - 15% = 9% wich will be used by the cell spanning through 2 columns.

theorie in action ;) :

<table style="border:1px solid #8c8c8c;width:100%;border:1px solid #8c8c8c;width:100%;border-collapse:collapse;margin-bottom:1.5em">
  <thead>
    <tr style="border-bottom:1px solid black;background-color:#e9e9e9;font-size:16px">
      <th width="24%" colspan="2">
        <div style="width:auto">10:35PM - 11:05PM (30 MIN)</div>
      </th>
      <th style="text-align:right;padding-right:1em;margin-right:1em;" height="40px;">John Williams</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em;">
        <div style="line-height:2em;font-weight:bold"> Topic:</div>
      </td>
      <td valign="baseline" colspan="2">
        <div>Resume Review</div>
      </td>
    </tr>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em">
        <div style="line-height:2em;font-weight:bold">Phone:</div>
      </td>
      <td valign="baseline" colspan="2">123445567</td>
    </tr>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em">
        <div style="line-height:2em;font-weight:bold">Email:</div>
      </td>
      <td valign="baseline" colspan="2"><a href="mailto:[email protected]" target="_blank">[email protected]</a></td>
    </tr>
    <tr>
      <td valign="baseline">
        <div style="line-height:2em;width:auto;font-weight:bold">Student notes:</div>
      </td>
      <td valign="baseline" colspan="2"> some junk test text</td>
    </tr>
  </tbody>
</table>