如何在同一行上对齐表格和div？

时间：2016-09-01 17:34:16

标签： html css html-table

我正在尝试将一个6行的表格对齐占据75％的水平空间旁边的div，文本位于右侧。

但是，以下html代码会导致它们彼此重叠。

我尝试使用内联块等，但无论我做什么，都不会将块放在旁边。

我做错了什么？整个工作片段如下：

<div id="ResultDetails" style="border:solid; border-width:2px; overflow:auto; border-color:lightgray; padding-left:12px;padding-right:12px; padding-top:12px;padding-bottom: 12px;margin:10px">
<table style="width:80%; display: inline-block; vertical-align: top; ">
    <tr>
        <td style="font-family:Calibri; font-size:large; color:midnightblue; text-align:left"><b>RESULT DETAILS</b></td>
    </tr>
    <tr>
        <td style="width:18%; font-size:large; padding-left: 2px"><i>Condition tested<sup>1</sup></i></td>
        <td style="width:20%; font-size:large; padding-left: 6px"><i>Result</i></td>
        <td style="width:20%; font-size:large; padding-left: 6px"><i>Risk Before Test<sup>2</sup></i></td>
        <td style="width:20%; font-size:large; padding-left: 6px"><i>Vehicle Risk Score<sup>3</sup></i></td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>
    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>
</table>
<table style="width:20%; display: inline-block; vertical-align: top; border-left: dashed">
    <tr> </tr>
    <tr>
        <td style="text-align: center">Positive Performance Stats </td>
    </tr>
    <tr>
        <td style="text-align: center"> Cars: 91% </td>
    </tr>
    <tr>
        <td style="text-align: center"> Buses: 93% </td>
    </tr>
    <tr>
        <td style="text-align: center">Planes: 38% </td>
    </tr>
    <tr>
        <td style="text-align: center">Minivans: 50% </td>
    </tr>
    <tr>
        <td style="text-align: center">
            Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.
            Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.Lorem Ipsum.
        </td>
    </tr>
</table>
</div>

</body>
</html>

3 个答案:

答案 0 :(得分：1)

如果你将桌子向左浮动，你可以接近你想要的。您还需要处理已放置在div上的边框，因为它会增加div的宽度。您可以告诉浏览器在宽度计算中包含边框或删除边框。

E.g。

table {
    float : left;
}

#PPV {
    box-sizing : border-box;
}

演示：https://jsfiddle.net/769k6zmd/2/

如果表格高于右边的div，则需要将overflow:auto添加到父div，因为浮动表将溢出父div。

关于box-sizing的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

答案 1 :(得分：0)

您可以尝试不在div内部div，而是将divs更改为li并让它们不在彼此之内。像这样

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <ul>
    <li id="ResultDetails" style="display: inline-block; border:solid; border-width:2px;  border-color:lightgray; padding-left:12px;padding-right:12px; padding-top:12px;padding-bottom: 12px;margin:0px">
      <table style="width:75%">
        <tr>
          <td style="font-family:Calibri; font-size:large;     color:midnightblue; text-align:left"><b>RESULT DETAILS</b>
          </td>
        </tr>
        <tr>
          <td style="width:25%; font-size:large; padding-left: 2px"><i>Condition tested<sup>1</sup></i>
          </td>
          <td style="width:25%; font-size:large; padding-left: 6px"><i>Result</i>
          </td>
          <td style="width:25%; font-size:large; padding-left: 6px"><i>Risk Before Test<sup>2</sup></i>
          </td>
          <td style="width:25%; font-size:large; padding-left: 6px"><i>Vehicle Risk Score<sup>3</sup></i>
          </td>
        </tr>

        <tr>
          <td class="BorderBottom">{{vehicle}}</td>
          <td class="BorderBottom">{{vehicle_result}}</td>
          <td class="BorderBottom">{{vehicle_testing}}</td>
          <td class="BorderBottom">{{vehicle_pollution}}</td>
        </tr>

        <tr>
          <td class="BorderBottom">{{vehicle}}</td>
          <td class="BorderBottom">{{vehicle_result}}</td>
          <td class="BorderBottom">{{vehicle_testing}}</td>
          <td class="BorderBottom">{{vehicle_pollution}}</td>
        </tr>

        <tr>
          <td class="BorderBottom">{{vehicle}}</td>
          <td class="BorderBottom">{{vehicle_result}}</td>
          <td class="BorderBottom">{{vehicle_testing}}</td>
          <td class="BorderBottom">{{vehicle_pollution}}</td>
        </tr>

        <tr>
          <td class="BorderBottom">{{vehicle}}</td>
          <td class="BorderBottom">{{vehicle_result}}</td>
          <td class="BorderBottom">{{vehicle_testing}}</td>
          <td class="BorderBottom">{{vehicle_pollution}}</td>
        </tr>
        <tr>
          <td class="BorderBottom">{{vehicle}}</td>
          <td class="BorderBottom">{{vehicle_result}}</td>
          <td class="BorderBottom">{{vehicle_testing}}</td>
          <td class="BorderBottom">{{vehicle_pollution}}</td>
        </tr>
      </table>
    </li>
    <li id="PPV" style="width:25%; border-left: dashed; display: inline-block; align-content: center;">
      Positive Performance Stats
      <br>Cars: 91%
      <br>Buses: 93%
      <br>Planes: 38%
      <br>Minivans: 50%
      <br>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum lorem ipsum lorem ipsum lorem ipsum, lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
    </li>
  </ul>

答案 2 :(得分：0)

您可以在div（例如div1）中添加表格，如果div为75％则设置宽度，如果表格为100％则设置宽度。对于需要浮动到div1右侧的div（比如div2），设置宽度小于25％，因为赋予外部div的填充。对于div1和div2，将float属性设置为left。 您可以看到以下代码

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div id="ResultDetails" style="border:solid;border-width: 2px;border-color:lightgray;padding-left: 1%;padding-right: 1%;padding-top: 1%;padding-bottom: 1%;margin: 1%;float: left;width: 96%;">
   <div style="
    float: left;
    width: 75%;
"><table style="width:100%;">
    <tbody><tr>
        <td style="font-family:Calibri; font-size:large; color:midnightblue; text-align:left"><b>RESULT DETAILS</b></td>
    </tr>
    <tr>
        <td style="width:25%; font-size:large; padding-left: 2px"><i>Condition tested<sup>1</sup></i></td>
        <td style="width:25%; font-size:large; padding-left: 6px"><i>Result</i></td>
        <td style="width:25%; font-size:large; padding-left: 6px"><i>Risk Before Test<sup>2</sup></i></td>
        <td style="width:25%; font-size:large; padding-left: 6px"><i>Vehicle Risk Score<sup>3</sup></i></td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>

    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>
    <tr>
        <td class="BorderBottom">{{vehicle}}</td>
        <td class="BorderBottom">{{vehicle_result}}</td>
        <td class="BorderBottom">{{vehicle_testing}}</td>
        <td class="BorderBottom">{{vehicle_pollution}}</td>
    </tr>
  </tbody></table></div>
<div id="PPV" style="width: 24%;border-left: dashed;display: inline-block;align-content: center;float: left;">
    Positive Performance Stats <br>
    Cars: 91% <br>
    Buses: 93%<br>
    Planes: 38%<br>
    Minivans: 50%<br>
    Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum, lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
</div>
</div>


</body></html>
相关问题
最新问题