6

In many weighty and serious tomes, particularly those published by the UK's venerable Her Majesty's Stationery Office (HMSO), one sees a great number of tables.

Often if the column contains numeric data, not only is it centred in the column, but also right aligned on that centre point, such that the last digit of the number is the entity that is centred. This layout is probably dictated by HMSO style rules.

I happen to have before me page 336 of History of the Second World War - United Kingdom Military Series - The War at Sea 1939-1945 - Volume I - The Defensive, and I find thereon a table matching the above description.

Using old-fashioned letterpress, or even in hot metal, it's admittedly totally manual and tedious, but relatively straightforward -- just use more or less leading until it lines up.

But I would like to know if it can it be done with Microsoft Word and/or HTML/CSS, preferably both.

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
casgage
  • 529
  • 1
  • 7
  • 18
  • Are you talking the first edition or the third edition of *History of the Second World War - United Kingdom Military Series - The War at Sea 1939-1945 - Volume I - The Defensive*. Please be precise so I know exactly where to look. – Mike Feb 01 '17 at 02:41
  • First edition 1954 – casgage Feb 02 '17 at 03:20
  • I was being sarcastic. I don't just happen to have that book lying around in 2 versions. Does my answer below solve your problem? – Mike Feb 02 '17 at 05:22
  • Yes, many thanks, it is a solution, and I should have thought of that myself, as I have been using CSS since it was a twinkle in the eye of the internet. It must be old age. – casgage Feb 02 '17 at 13:37

2 Answers2

7

This can be accomplished in HTML/CSS by wrapping the text with a centered inline-block element:

.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>
Mike
  • 23,542
  • 14
  • 76
  • 87
0

Enriching @casgage's answer: If you are trying to do this with different rows in the same table (i.e. the values are in different cells from the same column), you need to set a min-width value for the .wrap class. The min-width must be a value that makes all the wrapping containers of the same size. Using the examples from the other answer:

.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>
feanorcu
  • 1