Как мне одновременно (1) не допустить, чтобы <div> занимал всю доступную ширину и (2) заставить его сжимать поля со своими соседями?

Вы можете обернуть display: tablediv другим div и вместо этого положить запас на обертку div. Противно, но работает.

<p style = "margin:100px">This is a paragraph with 100px margin all around.</p>

<div style = "margin: 100px"><div style = "border: solid red 2px; display: table;">
  This is a div which had 100px margin all around and display:table, but the margin was moved to a wrapper div.
  <br/>
  The problem was that it didn't collapse margins with its neighbors.
</div></div>

<p style = "margin:100px">This is a paragraph with 100px margin all around.</p>

<div style = "margin: 100px; border: solid blue 2px; display: block;">
  This is a div with 100px margin all around and display:block.
  <br/>
  The problem is that it expands to take up all available width.
</div>

<p style = "margin:100px">This is a paragraph with 100px margin all around.</p>

Я бы, вероятно, просто разместил бы div (чтобы он не занимал доступную ширину), а затем, если бы это необходимо, очистил плавающее значение.

<p style = "margin:100px">This is a paragraph with 100px margin all around.</p>

<div style = "border: solid red 2px; float: left;">
  This should work.
</div>

<p style = "margin:100px;clear:both;">This is a paragraph with 100px margin all around.</p>