我在格式化我的 HTML 页面时遇到困难。
正如您从源代码中看到的那样，它是一个表格，其中每一行都包含由我的网络应用程序动态填充的格式化记录列表。 如果其中一列有空值，我想保留行的格式，所以我基本上应该添加足够的空格或考虑一个具有文本值的确切大小的 HTML block 。
好处是每个值都有固定的字符长度，所以它应该有优势。
我考虑过创建一个跨度，但它不支持宽度属性，我应该将样式更改为 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>
最佳答案
你的问题是你的语义搞砸了。您尝试构建一个表格，但随后将整个表格内容放在 1 个单元格中，然后您尝试使用列表在其中模拟表格。
只需将 1 个字段放入 1 个表格单元格中，它们就会很容易组合在一起。另外:“test1”在这种情况下是表格标题或标题。
第一个变体假定字段名称可能因行而异。如果不是这种情况，它们将属于表头。
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 间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30800636/