Wie richtet man eine Tabelle und ein Div in derselben Zeile aus?

Question

Ich versuche, eine Tabelle von 6 Reihen auszurichten, die 75% des horizontalen Raums neben einem div mit Text, der auf der rechten Seite ist, belegen.

Der folgende HTML-Code führt jedoch dazu, dass sie übereinander liegen.

Ich habe versucht, mit Inline-Block usw. zu spielen, aber egal was ich tue, es platziert den Block nicht daneben.

Was mache ich falsch? Der gesamte Arbeits Schnipsel ist unten:

<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>

Answer 1

Wenn Sie die Tabelle nach links schweben zu Ihnen nahe, was Sie wollen. Sie müssen sich auch mit dem Rahmen beschäftigen, den Sie auf das div gesetzt haben, da es dem div eine Breite hinzufügt. Sie können dem Browser entweder mitteilen, dass der Rahmen in die Breitenberechnung einbezogen werden soll, oder den Rahmen entfernen.

z.

table { 
    float : left; 
} 

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

Demo: https://jsfiddle.net/769k6zmd/2/

Wenn die Tabelle größer als die div nach rechts Sie overflow:auto an die Mutter div hinzuzufügen brauchen, weil die schwammen Tabelle das übergeordnete div überlaufen.

Informationen über box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 2

könnten Sie nicht versuchen, ein div in einem div zu machen, aber die divs-li ändern und sie nicht ineinander sein. Wie so

<!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>

Answer 3

Sie können die Tabelle in einem div (sagen div1) hinzufügen und die Breite gesetzt, wenn das div bis 75% und die Breite, wenn die Tabelle auf 100%. Für das div (also div2), das auf der rechten Seite des div1 floaten muss, wird die Breite auf weniger als 25% festgelegt, da das Padding dem äußeren div zugewiesen wird. Setzen Sie für float -Eigenschaft sowohl für div1 als auch für div2 die Eigenschaft left. Sie können den Code unten sehen

<!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>