Question

在许多沉重而严肃的书籍中，特别是那些由英国着名的女王陛下的文具办公室（HMSO）出版的书籍，人们可以看到大量的表格。

通常，如果列包含数字数据，不仅在列中居中，而且在该中心点上右对齐，这样最后数字的数字是居中的实体。这种布局可能由HMSO风格规则决定。

我碰巧遇到了第二次世界大战的历史第336页 - 英国军事系列 - 海上战争1939-1945 - 第一卷 - 防御，我在其上找到了符合上述说明的表格。

使用老式的凸版印刷，甚至是使用铁水，这无疑是完全手动和乏味的，但相对简单 - 只需使用或多或少的引导直到排队。

但我想知道是否可以使用Microsoft Word 和/或 HTML / CSS，最好是两者。

Answer 1

这可以通过使用居中的inline-block元素包装文本在HTML / CSS中完成：

.wrap {
  text-align:right;
  border: 3px dotted blue;  
  display: inline-block;
}
.container {
  border: 10px solid red;
  text-align: center;
}

<div class="container">
  <div class="wrap">
    Line 1 asddsa<br>
    Line 2 asdasdf<br>
    Line 3 asdfasdfasdf<br>
    Line 4 dsdf<br>
    Line 5<br>
    Line 6 s
  </div>
</div>

Answer 2

丰富@casgage的答案：如果您尝试对同一表中的不同行执行此操作（即，值位于同一列的不同单元格中），则需要为.wrap类设置最小宽度值。最小宽度必须是一个使所有包装容器都具有相同大小的值。使用其他答案中的示例：

.wrap {
    text-align: right;
    border: 2px dotted blue;
    display: inline-block;
    min-width: 150px;
}
.container {
    border: 2px solid red;
    text-align: center;
    min-width: 500px;
    padding: 5px;
}

<table>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 1 asddsa
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 2 asdasdf
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 3 asdfasdfasdf
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 4 dsdf
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 5
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 6 s
            </div>
        </td>
    </tr>
</table>

中心和右对齐

2 个答案: