html - 如何更改TD中段落的位置？

Question

我想将位于最后一列位置的授权签字文本放在 TD 的底部。我尝试了 valign，但该方法无效。现在，如何更改文本“Authorised signatory”的位置并将文本放在 TD 的底部？提前致谢，如果我犯了语法错误，我深表歉意。

tr.border_bottom td{
  border-bottom: 1px solid #000
}

<table>
  <tr class="border_bottom">
    <td style="text-align: left;width: 12.6cm;padding-right: 0px; border: solid #000; border-width: 1px 1px 0 0">
      <table>
        <tr>
          <td style="text-align: left;width: 6.3cm;padding-right: 0px; border-right: 1px solid #000">
            <p style="font-weight: bold;font-size: 14px;margin: 0">Bank : HDFC Bank Ltd.</p>
          </td>
          <td style="text-align: left;width: 6.3cm;padding-right: 0px;text-align: center;" rowspan="4" valign="bottom">
            <p style="font-weight: bold;font-size: 14px;padding: 10px 0 10px 0;border-top: 1px solid #000;margin: 0">Common Seal </p>
          </td>
        </tr>
        <tr>
          <td style="text-align: left;width: 6.3cm;padding-right: 0px; border-right: 1px solid #000">
            <p style="font-weight: bold;font-size: 14px;margin: 0">Bank A/C : 50200003685662</p>
          </td>
        </tr>
        <tr>
          <td style="text-align: left;width: 6.3cm;padding-right: 0px; border-right: 1px solid #000">
            <p style="font-weight: bold;font-size: 14px;margin: 0">Bank IFSC : HDFC0000069</p>
          </td>
        </tr>
        <tr>
          <td style="text-align: left;width: 6.3cm;padding-right: 5px; border-right: 1px solid #000;">
            <p style="font-size: 12px;margin: 10PX 0 10PX 0; text-align: justify;"><b>TERMS:</b> <br> Interest @ 24% p.a. will be charged. if this invoice is not paid by the date. No. complaints in repsect of material supplied wide this invoice will be entertained unless the same is lodged in within 15 days of despatch Subject to Ahmedabad Jurisdiction.</p>
          </td>
        </tr>
      </table>
    </td>
    <td style="text-align: left;width: 8.4cm;padding-right: 0px; border: solid #000; border-width: 1px 1px 0 0"  valign="top">
      <table style="width: 100%">
        <tr>
          <td style="text-align: left;width: 8.4cm;padding-right: 0px">
            <div style="float: left;width: 70%; border-right: 1px solid #000; margin-left: 5px">
              <p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0">GST On Reverse Charge: </p>
            </div>
            <div style="float: left;width: 30%"></div>
          </td>
        </tr>
        <tr>
          <td style="text-align: left;width: 8.4cm;padding-right: 0px;border: none">
            <p style="text-align: center;font-size: 12px;margin: 7px 0 0 0">Certified that particular given above is true and correct</p>
            <p style="text-align: center;font-size: 16px;margin: 3px 0 0 0">For, <b>SHRI ABICA PLASTIC INDUSTRIES</b></p>
            <p style="text-align: center;font-size: 12px;margin: 3px 0 0 0">Authorised signatory</b></p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

可能最简单的方法是放置 position: absolute; bottom: 0; 对应p 元素，position: relative 对应整个表格的右边td。当然，摆脱嵌套表格并使用(例如)flexbox 方法会更容易和更清晰，但我不想改变太多你的风格。

片段

tr.border_bottom td{
  border-bottom: 1px solid #000
}

<table>
  <tr class="border_bottom">
    <td style="text-align: left;width: 12.6cm;padding-right: 0px; border: solid #000; border-width: 1px 1px 0 0">
      <table>
        <tr>
          <td style="text-align: left;width: 6.3cm;padding-right: 0px; border-right: 1px solid #000">
            <p style="font-weight: bold;font-size: 14px;margin: 0">Bank : HDFC Bank Ltd.</p>
          </td>
          <td style="text-align: left;width: 6.3cm;padding-right: 0px;text-align: center;" rowspan="4" valign="bottom">
            <p style="font-weight: bold;font-size: 14px;padding: 10px 0 10px 0;border-top: 1px solid #000;margin: 0">Common Seal </p>
          </td>
        </tr>
        <tr>
          <td style="text-align: left;width: 6.3cm;padding-right: 0px; border-right: 1px solid #000">
            <p style="font-weight: bold;font-size: 14px;margin: 0">Bank A/C : 50200003685662</p>
          </td>
        </tr>
        <tr>
          <td style="text-align: left;width: 6.3cm;padding-right: 0px; border-right: 1px solid #000">
            <p style="font-weight: bold;font-size: 14px;margin: 0">Bank IFSC : HDFC0000069</p>
          </td>
        </tr>
        <tr>
          <td style="text-align: left;width: 6.3cm;padding-right: 5px; border-right: 1px solid #000;">
            <p style="font-size: 12px;margin: 10PX 0 10PX 0; text-align: justify;"><b>TERMS:</b> <br> Interest @ 24% p.a. will be charged. if this invoice is not paid by the date. No. complaints in repsect of material supplied wide this invoice will be entertained unless the same is lodged in within 15 days of despatch Subject to Ahmedabad Jurisdiction.</p>
          </td>
        </tr>
      </table>
    </td>
    <td style="position: relative; text-align: left;width: 8.4cm;padding-right: 0px; border: solid #000; border-width: 1px 1px 0 0"  valign="top">
      <table style="width: 100%">
        <tr>
          <td style="text-align: left;width: 8.4cm;padding-right: 0px">
            <div style="float: left;width: 70%; border-right: 1px solid #000; margin-left: 5px">
              <p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0">GST On Reverse Charge: </p>
            </div>
            <div style="float: left;width: 30%"></div>
          </td>
        </tr>
        <tr>
          <td style="text-align: left;width: 8.4cm;padding-right: 0px;border: none">
            <p style="text-align: center;font-size: 12px;margin: 7px 0 0 0">Certified that particular given above is true and correct</p>
            <p style="text-align: center;font-size: 16px;margin: 3px 0 0 0">For, <b>SHRI ABICA PLASTIC INDUSTRIES</b></p>
            <p style="position: absolute; bottom: 0; width: 100%; text-align: center;font-size: 12px;margin: 3px 0 0 0">Authorised signatory</b></p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>