Question

我试图在动态创建的表（外部表）中显示一段文本。外表内部是作为间隔物的跨度。我试图显示一个与跨距内联的长字符串。但是当字符串换行到下一行时，它将从页面的开头开始。我需要它显示垂直对齐文本在第一行开始的位置。

我没有对跨度的任何控制，因为它们是动态创建的，因此我无法为这些添加额外的样式。我的解决方案是在其中一个外部表格单元格中添加一个内部表格，并将其与跨度间隔符一起显示。

下面的代码是在第二行开始的表格，在span填充符下面，即使我已将display的style属性设置为inline-table。

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <table style="width:500px;">
    <tr>
      <td><span style="padding:50px"></span><span style="padding:50px"></span>
        <table style="display:inline-table; vertical-align:top">
          <tr>
            <td>
              HERE IS MY SENTENCE HERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE
              IS MY SENTENCE.
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

</html>

＆＃13;

最终输出应该是这样的。

                             HERE IS MY SENTENCE HERE IS MY 
                             SENTENCEHERE IS MY SENTENCEHERE IS MY 
                             SENTENCEHERE IS MY SENTENCEHERE IS MY 
                             SENTENCEHERE IS MY SENTENCEHERE IS MY 
                             SENTENCEHERE IS MY SENTENCEHERE IS MY 
                             SENTENCEHERE IS MY SENTENCEHERE IS MY 
                             SENTENCEHERE IS MY SENTENCEHERE IS MY 
                             SENTENCE.

Answer 1

尝试以下代码段。还删除了所有内联样式。

 table {
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

OR

 table {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }

＆＃13;

table {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <table>
    <tr>
      <td><span style="padding:50px"></span><span style="padding:50px"></span>
        <table>
          <tr>
            <td>
              HERE IS MY SENTENCE HERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE IS MY SENTENCEHERE
              IS MY SENTENCE.
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

</html>

＆＃13;

在表中创建内联表

1 个答案: