垂直小时尺寸和表格之间的更多空间并对齐文本

Question

我正在努力实现与下面这个相似的外观。我不能使用外部css文件，但它必须嵌入到html标签中。

到目前为止我得到了这样的HTML：

<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:left;width:120px;min-width:120px;height:30px;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;width:175px;min-width:175px;height:30px;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:left;width:120px;min-width:120px;height:30px;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;width:175px;min-width:175px;height:30px;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:left;width:120px;min-width:120px;height:30px;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;width:175px;min-width:175px;height:30px;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:left;width:120px;min-width:120px;height:30px;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;width:175px;min-width:175px;height:30px;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:left;width:120px;min-width:120px;height:30px;margin:5px;padding:5px;color:white;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;width:175px;min-width:175px;height:30px;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff">Value 5</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 rowspan="4"><hr width="1" size="200" background-color="cornflowerBlue"></td>
        <td style="text-align:left;word-wrap:break-word;width:175px;min-width:175px;height:30px;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff"></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:left;width:120px;min-width:120px;height:30px;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;width:175px;min-width:175px;height:30px;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:left;width:120px;min-width:120px;height:30px;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;width:175px;min-width:175px;height:30px;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>
    <tr>
        <td style="vertical-align:middle;text-align:left;width:120px;min-width:120px;height:30px;margin:5px;padding:5px;color:white;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #b4b4b4">Länge:</td>
        <td style="text-align:left;word-wrap:break-word;width:175px;min-width:175px;height:30px;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff">Value 9</td>
    </tr>
</table><div style="clear:both !important;">
</div>
<br>
</br>

它给出了这样的结果：

请不要在灰色背景下看一些矩形，因为它仅用于某些测试。

我在上面的图片上标有以下问题：

1. 我希望这个hr垂直尺寸类似于桌面高度上的目标，左桌和右桌之间的空间更接近。现在我把固定尺寸。
2. 我希望在这种情况下，当左侧文本换行时，例如值4将位于与第一行内联的位置。
3. 我想在我标记的内容之间有更多的间距。

希望你得到我的观点。谢谢你的帮助！

Answer 1

尝试解决您的问题：

1. 没有完全理解这一点，代码中没有hr。但是，如果您希望该垂直线与表格的高度相匹配，请使用表格上的边框绘制它。

2. 如果您希望文本垂直对齐而不管包装，请对所有vertical-align: top;使用css属性td ...因为vertical-align: middle;会导致值为4在你长篇文章的中间对齐。

3. 添加填充左（并相应地减小最小宽度和宽度）

希望这会有所帮助：）

编辑添加了代码

<h1 style="max-width: 740px; text-align: center;">Information details</h1>
<table style="margin:0px 35px 0px -10px;font-size:15px;border-spacing:5px 0;background-color:transparent;border-collapse:separate;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;float:left;">
    <tr>
        <td colspan="2"><h2>General</h2></td>
    </tr>
    <tr>
        <td style="vertical-align:top;text-align:left;word-wrap:break-word;max-width:120px;min-width:120px;height:30px;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="vertical-align:top;text-align:left;word-wrap:break-word;max-width:175px;min-width:175px;height:30px;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff;border-right: 1px solid grey;padding-left:30px;">Value 1</td>
    </tr>
    <tr>
        <td style="vertical-align:top;text-align:left;word-wrap:break-word;max-width:120px;min-width:120px;height:30px;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="vertical-align:top;text-align:left;word-wrap:break-word;max-width:175px;min-width:175px;height:30px;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff;border-right: 1px solid grey;padding-left:30px;">Value 2</td>
    </tr>
    <tr>
        <td style="vertical-align:top;text-align:left;word-wrap:break-word;max-width:120px;min-width:120px;height:30px;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="vertical-align:top;text-align:left;word-wrap:break-word;max-width:175px;min-width:175px;height:30px;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff;border-right: 1px solid grey;padding-left:30px;">Value 3</td>
    </tr>
    <tr>
        <td style="vertical-align:top;text-align:left;word-wrap:break-word;max-width:120px;min-width:120px;height:30px;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="vertical-align:top;text-align:left;word-wrap:break-word;max-width:175px;min-width:175px;height:30px;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff;border-right: 1px solid grey;padding-left:30px;">Value 4</td>
    </tr>
    <tr>
        <td style="vertical-align:top;text-align:left;word-wrap:break-word;max-width:120px;min-width:120px;height:30px;margin:5px;padding:5px;color:white;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: white">Attribute 15:</td>
        <td style="vertical-align:top;text-align:left;word-wrap:break-word;max-width:175px;min-width:175px;height:30px;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff;border-right: 1px solid grey;padding-left:30px;">Value 5</td>
    </tr>
</table>
<!-- Show line with border-right, this table with the <hr> is useless
<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 rowspan="4"><hr width="1" size="200" background-color="cornflowerBlue"></td>
        <td style="text-align:left;word-wrap:break-word;width:175px;min-width:175px;height:30px;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff"></td>
    </tr>
</table> -->
<table style="margin:0px 0px 0px -10px;font-size:15px;border-spacing:5px 0;background-color:transparent;border-collapse:separate;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;float:left;">
    <tr>
        <td colspan="2"><h2>Others</h2></td>
    </tr>
    <tr>
        <td style="vertical-align:top;text-align:left;word-wrap:break-word;max-width:120px;min-width:120px;height:30px;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="vertical-align:top;text-align:left;word-wrap:break-word;max-width:175px;min-width:175px;height:30px;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff;padding-left:30px;">Value 7</td>
    </tr>
    <tr>
        <td style="vertical-align:top;text-align:left;word-wrap:break-word;max-width:120px;min-width:120px;height:30px;margin:5px;padding:5px;color:white;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #b4b4b4">Breite:</td>
        <td style="vertical-align:top;text-align:left;word-wrap:break-word;max-width:175px;min-width:175px;height:30px;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff;padding-left:30px;">55 cm, 99 cm, 20 cm, 60 cm, 100 cm, 1000 cm, 9000 cm, 77777 cm</td>
    </tr>
    <tr>
        <td style="vertical-align:top;text-align:left;word-wrap:break-word;max-width:120px;min-width:120px;height:30px;margin:5px;padding:5px;color:white;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #b4b4b4">Länge:</td>
        <td style="vertical-align:top;text-align:left;word-wrap:break-word;max-width:175px;min-width:175px;height:30px;margin:5px;padding:5px;font-family:Raleway,Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background-color: #fff;padding-left:30px;">Value 9</td>
    </tr>
</table><div style="clear:both !important;">
</div>
<br>
</br>