HTML 值为空时的间距

Question

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

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

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

<!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

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

只需将 1 个字段放入 1 个 table 单元格中，它们就会很容易组合在一起。另外："test1" 在这种情况下是 table 标题或标题。

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

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;
}

<!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>

HTML 值为空时的间距

HTML spacing if value is empty

html

css

string

html-table