如何在不干擾td的情況下設定th寬度

我正在撰寫一個代碼，我正在用 HTML 創建一個表格。這里我的挑戰是，如果我嘗試通過增加寬度將標題（時間范圍）放在一行中，tds 的寬度也會發生變化。這是我的代碼。

<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>

注意：我不允許使用外部 CSS 檔案。請讓我知道我該如何解決這個問題。

謝謝

uj5u.com熱心網友回復：

如果你想要不同寬度的第一個單元格，它們需要跨越不同數量的列，否則它只會填充一列。

你有一個 2 列的表，通過 colspan，你可以把它變成 3 列。

thead : <th colspan="2">th 24%</th><th> use space left </th>= 3 列，第一個單元格通過 2 列

tbody : <td>15%</td><td colspan="2"> space left</td>= 3 列。

第二列將是 24% - 15% = 9%，這將被跨越 2 列的單元格使用。

理論在行動;) :

<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>

標籤：html css

上一篇：在CSS中定位影像

下一篇：如何在不破壞時間線格式的情況下使用溢位-x