内嵌CSS实现垂直HR尺寸调整、表格间距及文本对齐需求

我来帮你一步步修复这三个问题，以下是调整后的完整代码，每个修改点都做了针对性优化：

关键修改说明 #

• 垂直分隔线修复：替换原来的<hr>为<div>实现垂直线条（<hr>默认是水平元素，很难精准控制垂直尺寸），通过设置width:1px、height:200px和背景色实现垂直分隔，并让它在单元格中垂直居中。
• 表格间距调整：给中间的分隔表格添加margin-left:15px和margin-right:15px，让左右两个内容表格和分隔线之间保持合适的留白间距。
• 文本对齐优化：
  • 左边属性列设置text-align:right，让标签右对齐更贴合示例效果；
  • 修正了Attribute 15的文字颜色（原来白色文字配白色背景导致内容不可见）；
  • 给所有单元格设置height:auto+white-space:normal，确保长文本（比如长属性名、多尺寸值）能自动换行、单元格自动撑开，避免内容截断。

<table style="margin:0px 35px 0px -10px;font-size:15px;border-spacing:5px 5px;background-color:transparent;border-collapse:separate;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;float:left;">
  <tr>
    <td style="vertical-align:middle;text-align:right;width:120px;min-width:120px;height:auto;margin:5px;padding:5px;color:black;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: white">Attribute 1:</td>
    <td style="text-align:left;word-wrap:break-word;white-space:normal;width:175px;min-width:175px;height:auto;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff">Value 1</td>
  </tr>
  <tr>
    <td style="vertical-align:middle;text-align:right;width:120px;min-width:120px;height:auto;margin:5px;padding:5px;color:black;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: white">Attribute 2:</td>
    <td style="text-align:left;word-wrap:break-word;white-space:normal;width:175px;min-width:175px;height:auto;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff">Value 2</td>
  </tr>
  <tr>
    <td style="vertical-align:middle;text-align:right;width:120px;min-width:120px;height:auto;margin:5px;padding:5px;color:black;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: white">Attribute 3:</td>
    <td style="text-align:left;word-wrap:break-word;white-space:normal;width:175px;min-width:175px;height:auto;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff">Value 3</td>
  </tr>
  <tr>
    <td style="vertical-align:middle;text-align:right;width:120px;min-width:120px;height:auto;margin:5px;padding:5px;color:black;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: white">Attributedwdwdwdwdgffewfwefwedewdwedwedwedabc 4:</td>
    <td style="text-align:left;word-wrap:break-word;white-space:normal;width:175px;min-width:175px;height:auto;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff">Value 4</td>
  </tr>
  <tr>
    <td style="vertical-align:middle;text-align:right;width:120px;min-width:120px;height:auto;margin:5px;padding:5px;color:black;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: white">Attribute 15:</td>
    <td style="text-align:left;word-wrap:break-word;white-space:normal;width:175px;min-width:175px;height:auto;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff">Value 5</td>
  </tr>
</table>
<!-- 中间分隔表格：添加左右margin实现间距，用div做垂直分隔线 -->
<table style="margin:0px 15px 0px 15px;font-size:15px;border-spacing:5px 5px;background-color:transparent;border-collapse:separate;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;float:left;">
  <tr>
    <td style="vertical-align:middle;">
      <div style="width:1px;height:200px;background-color:cornflowerBlue;"></div>
    </td>
  </tr>
</table>
<table style="margin:0px 0px 0px -10px;font-size:15px;border-spacing:5px 5px;background-color:transparent;border-collapse:separate;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;float:left;">
  <tr>
    <td style="vertical-align:top;text-align:right;width:120px;min-width:120px;height:auto;margin:5px;padding:5px;color:white;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #b4b4b4">Höhe:</td>
    <td style="text-align:left;word-wrap:break-word;white-space:normal;width:175px;min-width:175px;height:auto;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff">Value 7</td>
  </tr>
  <tr>
    <td style="vertical-align:top;text-align:right;width:120px;min-width:120px;height:auto;margin:5px;padding:5px;color:white;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #b4b4b4">Breite:</td>
    <td style="text-align:left;word-wrap:break-word;white-space:normal;width:175px;min-width:175px;height:auto;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff">55 cm, 99 cm, 20 cm, 60 cm, 100 cm, 1000 cm, 9000 cm, 77777 cm</td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者Arie