How to display special unicode characters using monospace font in HTML with preserved character width

It's not the browser that's expanding the characters, it's the font definition itself. I doubt that there exists a truly monospace font that includes all these characters and defines them all at the same width, but that's what you should be looking for. See this question for more details about why this is probably not available.

The reason is that some of the characters are missing from the first font listed in the font-family declaration being applied. They will thus be displayed some other font(s) in the system, or some indicator of unrepresentable character is shown.

For example, the first character is present in a handful of fonts only, see http://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm (which does not cover all fonts but most fonts that people probably have on their computers).

Even if the other fonts used are monospace font, they may have different advance widths for characters. For example, Everson Mono has a slightly smaller width than DejaVu Sans Mono. Being monospace means just that within the font, all characters have the same advance width.

So you would need to use a single font that contains all the characters you need. For this collection of characters, the two above-mentioned fonts are probably the only publicly distributed monospace fonts that contain them all. Well, there is unifont, but it is a bitmap font with very coarse design; it might look tolerable in 12pt size or somewhat larger.