Question

我在格式化HTML页面时遇到了困难。

从源代码中可以看出，它是一个表，其中每行包含由我的Web应用程序动态填充的格式化记录列表。如果其中一列有一个空值，我想保留行的格式，所以我基本上应该添加足够的空格或考虑具有文本值的确切大小的HTML块。

好处是每个值都有一个固定的字符长度，所以它应该有利。我考虑过创建一个跨度，但它不支持width属性，我应该将样式更改为display:block，但在我看来，它有点过于棘手，我想要一个简单而聪明的解决方案。我附上了页面的源代码和我目前获得的输出。

Output

<!doctype html>
  <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252"></head>
    <body>
    <table>
    <tr><td style="font-size: 11px; color: #000000; font-family: Verdana; border-bottom: #ff0000 1px solid;">
    <table>
    <tr><td>test1:</td></tr>
    <tr><td>
    <ul>
    <li>FIELD1:;, FIELD2: <b>443</b>, FIELD3: <b>191,51</b></li>
    <li>FIELD1: <b>1000101</b>, FIELD2: <b>442</b>, FIELD3: <b>43,2</b></li><li>FIELD1: <b>1000176</b>, FIELD2:, FIELD3: <b>36</b></li>
    </ul></td></tr>
    </table>
    </body>
    </html>

Answer 1

你的问题是你的语义搞砸了。您尝试构建一个表，然后将整个表内容放在1个单元格中，然后尝试使用列表模拟该表。

只需将1个字段放在1个表格单元格中即可轻松组合。另外：＆＃34; test1＆＃34;在这种情况下是表格标题或标题。

第一个变体假设字段名称可能因行而异。如果不是这种情况，则它们属于表头。

＆＃13;

table#test1 tbody tr th {
  font-weight: normal;
  text-align: left;
}
table#test1 tbody tr td {
  font-weight: bold;
  text-align: right;
}

table#test2 thead tr td {
  font-weight: bold;
}
table#test2 tbody tr td {
  text-align: right;
}

＆＃13;

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
  </head>
  <body>
    <table id="test1">
      <caption>test1</caption>
      <tbody>
        <tr><th>FIELD1:</th><td></td><th>FIELD2:</th><td>443</td><th>FIELD3:</th><td class="value">191,51</tr>
        <tr><th>FIELD1:</th><td class="value">1000101</td><th>FIELD2:</th><td class="value">442</td><th>FIELD3:</th><td class="value">43,2</tr>
        <tr><th>FIELD1:</th><td class="value">1000176</td><th>FIELD2:</th><td class="value"></td><th>FIELD3:</th><td class="value">36</tr>
      </tbody>
    </table>
    <table id="test2">
      <caption>test2</caption>
      <thead>
        <tr><td>FIELD1</td><td>FIELD2</td><td>FIELD3</tr>
      </thead>
      <tbody>
        <tr><td></td><td>443</td><td>191,51</tr>
        <tr><td>1000101</td><td>442</td><td>43,2</tr>
        <tr><td>1000176</td><td></td><td>36</tr>
      </tbody>
    </table>
  </body>
</html>

＆＃13;

如果值为空，则为HTML间距

1 个答案: