Question

＆＃13;

page {
    background: #fff;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
    position: relative;
}
page[size="A4"] {
    width:21cm;
}
tr.border_bottom td{
    border-bottom: 1px solid #eee
}

＆＃13;

<page size="A4">
    <table style="width: 100%;font-size: 15px;font-family: 'Roboto', sans-serif;">
        <tbody>
            <tr class="border_bottom">
                <td style="text-align: center;padding: 0;width: 7cm"><p style="margin: 5px 0;font-weight: bold;">Credit</p></td>
                <td style="text-align: center;border-left: 1px solid #eee;padding: 0;width: 7cm"><p style="margin: 5px 0;font-weight: bold;">Estimate</p></td>
                <td style="text-align: center;border-left: 1px solid #eee;padding: 0;width: 7cm"><p style="margin: 5px 0;font-weight: bold;">Date: 24-11-2017</p></td>
            </tr>
            <tr class="border_bottom">
                <td style="text-align: center;border-left: 1px solid #eee;padding: 5px;width: 7cm;" colspan="2">
                    <p style="font-size: 17px;margin: 5px 0;"><b>Customer Detail</b></p>
                </td>
                <td style="text-align: center;border-left: 1px solid #eee;padding: 0;width: 7cm;">
                    <p style="font-size: 17px;margin: 5px 0;"><b>Invoice Detail</b></p>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <table>
                        <tbody>
                            <tr class="border_bottom">
                                <td style="width: 0.7cm;max-width: 0.7cm;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">SR</td>
                                <td style="width: 8.5cm;max-width: 8.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Item</td>
                                <td style="width: 0.8cm;max-width: 0.8cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">QTY</td>
                                <td style="width: 3cm;max-width: 3cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Unit</td>
                                <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Rate</td>
                                <td style="width: 1.5cm;max-width: 1.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Dis.</td>
                                <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">RAD</td>
                                <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Total</td>
                            </tr>
                            <tr class="border_bottom">
                                <td style="width: 0.7cm;max-width: 0.7cm;padding: 2px 5px;word-wrap: break-word;">100</td>
                                <td style="width: 8.5cm;max-width: 8.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">KV-1 Suggestion Box</td>
                                <td style="width: 0.8cm;max-width: 0.8cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">999</td>
                                <td style="width: 3cm;max-width: 3cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">Carton</td>
                                <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99999.00</td>
                                <td style="width: 1.5cm;max-width: 1.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99.99%</td>
                                <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99999.00</td>
                                <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99999.00</td>
                            </tr>
                        </tbody>
                    </table>
                    <p style="bottom: 0;right: 0;font-size: 12px;position: absolute;margin-right: 10px;"><b>Hwllo world!</b></p>
</page>

＆＃13;

如你所见

你好世界

在右下方没有完美显示。我想在右下方文本上完美地显示文字，但不得覆盖总面积。我怎样才能做到这一点？为什么它不能完美展示？抱歉我的英语不好。提前谢谢。

Answer 1

首先，您没有关闭上方的td, tr, tbody and table代码，而p代码中您应该使用style="float: right;"

代码段：

＆＃13;

page {
        background: #fff;
        display: block;
        margin: 0 auto;
        margin-bottom: 0.5cm;
        box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
        position: relative;
      }
      page[size="A4"] {
        width:21cm;
      }
      tr.border_bottom td{
        border-bottom: 1px solid #eee
      }

＆＃13;

<page size="A4">
        <table style="width: 100%;font-size: 15px;font-family: 'Roboto', sans-serif;">
          <tbody><tr class="border_bottom">
            <td style="text-align: center;padding: 0;width: 7cm"><p style="margin: 5px 0;font-weight: bold;">Credit</p></td>
            <td style="text-align: center;border-left: 1px solid #eee;padding: 0;width: 7cm"><p style="margin: 5px 0;font-weight: bold;">Estimate</p></td>
            <td style="text-align: center;border-left: 1px solid #eee;padding: 0;width: 7cm"><p style="margin: 5px 0;font-weight: bold;">Date: 24-11-2017</p></td>
          </tr>
          <tr class="border_bottom">
            <td style="text-align: center;border-left: 1px solid #eee;padding: 5px;width: 7cm;" colspan="2">
              <p style="font-size: 17px;margin: 5px 0;"><b>Customer Detail</b></p>
            </td>
            <td style="text-align: center;border-left: 1px solid #eee;padding: 0;width: 7cm;">
              <p style="font-size: 17px;margin: 5px 0;"><b>Invoice Detail</b></p>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <table>
                <tbody><tr class="border_bottom">
                  <td style="width: 0.7cm;max-width: 0.7cm;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">SR</td>
                  <td style="width: 8.5cm;max-width: 8.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Item</td>
                  <td style="width: 0.8cm;max-width: 0.8cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">QTY</td>
                  <td style="width: 3cm;max-width: 3cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Unit</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Rate</td>
                  <td style="width: 1.5cm;max-width: 1.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Dis.</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">RAD</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Total</td>
                </tr>
                <tr class="border_bottom">
                  <td style="width: 0.7cm;max-width: 0.7cm;padding: 2px 5px;word-wrap: break-word;">100</td>
                  <td style="width: 8.5cm;max-width: 8.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">KV-1 Suggestion Box</td>
                  <td style="width: 0.8cm;max-width: 0.8cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">999</td>
                  <td style="width: 3cm;max-width: 3cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">Carton</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99999.00</td>
                  <td style="width: 1.5cm;max-width: 1.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99.99%</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99999.00</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99999.00</td>
                </tr>
        </tbody></table>
        </td>
                </tr>
            </tbody>
        </table>
        <p style="float: right;"><b>Hello world!</b></p>
      </page>

＆＃13;

Answer 2

表布局有点棘手，因为它们会自动调整大小，但是你想要实现的是浮点数（如果我理解正确的话）。

删除绝对定位并改为使用float: right;。当你内联时不需要改变CSS。

page {
  background: #fff;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
  position: relative;
}

page[size="A4"] {
  width:21cm;
}

tr.border_bottom td{
  border-bottom: 1px solid #eee
}

<page size="A4">
        <table style="width: 100%;font-size: 15px;font-family: 'Roboto', sans-serif;">
          <tbody><tr class="border_bottom">
            <td style="text-align: center;padding: 0;width: 7cm"><p style="margin: 5px 0;font-weight: bold;">Credit</p></td>
            <td style="text-align: center;border-left: 1px solid #eee;padding: 0;width: 7cm"><p style="margin: 5px 0;font-weight: bold;">Estimate</p></td>
            <td style="text-align: center;border-left: 1px solid #eee;padding: 0;width: 7cm"><p style="margin: 5px 0;font-weight: bold;">Date: 24-11-2017</p></td>
          </tr>
          <tr class="border_bottom">
            <td style="text-align: center;border-left: 1px solid #eee;padding: 5px;width: 7cm;" colspan="2">
              <p style="font-size: 17px;margin: 5px 0;"><b>Customer Detail</b></p>
            </td>
            <td style="text-align: center;border-left: 1px solid #eee;padding: 0;width: 7cm;">
              <p style="font-size: 17px;margin: 5px 0;"><b>Invoice Detail</b></p>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <table>
                <tbody><tr class="border_bottom">
                  <td style="width: 0.7cm;max-width: 0.7cm;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">SR</td>
                  <td style="width: 8.5cm;max-width: 8.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Item</td>
                  <td style="width: 0.8cm;max-width: 0.8cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">QTY</td>
                  <td style="width: 3cm;max-width: 3cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Unit</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Rate</td>
                  <td style="width: 1.5cm;max-width: 1.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Dis.</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">RAD</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Total</td>
                </tr>
                <tr class="border_bottom">
                  <td style="width: 0.7cm;max-width: 0.7cm;padding: 2px 5px;word-wrap: break-word;">100</td>
                  <td style="width: 8.5cm;max-width: 8.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">KV-1 Suggestion Box</td>
                  <td style="width: 0.8cm;max-width: 0.8cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">999</td>
                  <td style="width: 3cm;max-width: 3cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">Carton</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99999.00</td>
                  <td style="width: 1.5cm;max-width: 1.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99.99%</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99999.00</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99999.00</td>
                </tr>
        </tbody></table>
        <p style="float: right;font-size: 12px;margin-right: 10px;"><b>Hello world!</b></p>
      </page>

Answer 3

您应该正确结束表格，然后填写

标签。这段代码应该有效：

page {
        background: #fff;
        display: block;
        margin: 0 auto;
        margin-bottom: 0.5cm;
        box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
        position: relative;
      }
      page[size="A4"] {
        width:21cm;
      }
      tr.border_bottom td{
        border-bottom: 1px solid #eee
      }

<page size="A4">
        <table style="width: 100%;font-size: 15px;font-family: 'Roboto', sans-serif;">
          <tbody><tr class="border_bottom">
            <td style="text-align: center;padding: 0;width: 7cm"><p style="margin: 5px 0;font-weight: bold;">Credit</p></td>
            <td style="text-align: center;border-left: 1px solid #eee;padding: 0;width: 7cm"><p style="margin: 5px 0;font-weight: bold;">Estimate</p></td>
            <td style="text-align: center;border-left: 1px solid #eee;padding: 0;width: 7cm"><p style="margin: 5px 0;font-weight: bold;">Date: 24-11-2017</p></td>
          </tr>
          <tr class="border_bottom">
            <td style="text-align: center;border-left: 1px solid #eee;padding: 5px;width: 7cm;" colspan="2">
              <p style="font-size: 17px;margin: 5px 0;"><b>Customer Detail</b></p>
            </td>
            <td style="text-align: center;border-left: 1px solid #eee;padding: 0;width: 7cm;">
              <p style="font-size: 17px;margin: 5px 0;"><b>Invoice Detail</b></p>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <table>
                <tbody><tr class="border_bottom">
                  <td style="width: 0.7cm;max-width: 0.7cm;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">SR</td>
                  <td style="width: 8.5cm;max-width: 8.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Item</td>
                  <td style="width: 0.8cm;max-width: 0.8cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">QTY</td>
                  <td style="width: 3cm;max-width: 3cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Unit</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Rate</td>
                  <td style="width: 1.5cm;max-width: 1.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Dis.</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">RAD</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;font-weight: bold;">Total</td>
                </tr>
                <tr class="border_bottom">
                  <td style="width: 0.7cm;max-width: 0.7cm;padding: 2px 5px;word-wrap: break-word;">100</td>
                  <td style="width: 8.5cm;max-width: 8.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">KV-1 Suggestion Box</td>
                  <td style="width: 0.8cm;max-width: 0.8cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">999</td>
                  <td style="width: 3cm;max-width: 3cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">Carton</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99999.00</td>
                  <td style="width: 1.5cm;max-width: 1.5cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99.99%</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99999.00</td>
                  <td style="width: 2cm;max-width: 2cm;border-left: 1px solid #eee;padding: 2px 5px;word-wrap: break-word;">99999.00</td>
                </tr>
        </tbody></table></td></tr></table>
        <div align="right">
            <h6>Hello World!</h6>
          </div>
      </page>

CSS在另一个文本上写文本

3 个答案: