Question

我要放置位于最后一列位置的授权签名文本是TD的底部。我尝试了valign，但是该方法不起作用。现在，如何更改文本“授权签署人”的位置并将文本放置在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>

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

1 个答案:

摘要