3列レイアウトのHTMLテーブルの書式

Question

HTMLテーブルがあります。3列レイアウトのデータを表示したいと思っています。私はここに何かを持っています：https://jsfiddle.net/j89cttva/1/

しかし空白の空白をすべて圧縮するために空白を一番上に消したいのですが。誰でも助けてくれますか？

<table> 
    <table style="width: 30%; margin-bottom: 5px;font-size:12px;float: left;"> 
    <tr> 
     <td style="width: 10%; vertical-align: top;"> 
     <div class="accent-color2" style="width: 100px; padding: 0px 10px;"><b>Comfort_Features:</b></div> 
     </td> 
    </tr> 
    <td style="width: 30%; padding-right: 5px; vertical-align: top;"> 
     <ul style="padding-left: 10px;"> 
     <li>Rear Center Folding With Storage and Pass-Thru Armrests</li> 
     <li>Carpet Floor Mats</li> 
     <li>Carpet Floors</li> 
     <li>Front Floor Mats</li> 
     <li>Chrome Interior Accents</li> 
     <li>Simulated Alloy Shift Knob Trim</li> 
     <li>Urethane Steering Wheel Trim</li> 
     </ul> 
    </td> 
    </table> 
    <table style="width: 30%; margin-bottom: 5px;font-size:12px;float: left;display: inline-block;"> 
    <tr> 
     <td style="width: 10%; vertical-align: top;"> 
     <div class="accent-color2" style="width: 100px; padding: 0px 10px;"><b>Drivetrain:</b></div> 
     </td> 
    </tr> 
    <td style="width: 30%; padding-right: 5px; vertical-align: top;"> 
     <ul style="padding-left: 10px;"> 
     <li>4.11 Axle Ratio</li> 
     </ul> 
    </td> 
    </table> 
    <table style="width: 30%; margin-bottom: 5px;font-size:12px;float: left;display: inline-block;"> 
    <tr> 
     <td style="width: 10%; vertical-align: top;"> 
     <div class="accent-color2" style="width: 100px; padding: 0px 10px;"><b>Engine:</b></div> 
     </td> 
    </tr> 
    <td style="width: 30%; padding-right: 5px; vertical-align: top;"> 
     <ul style="padding-left: 10px;"> 
     <li>140 Amps Alternator</li> 
     <li>600 Cca Battery Rating</li> 
     <li>Battery Saver</li> 
     <li>Maintenance-Free Battery</li> 
     <li>50 State Emissions</li> 
     <li>Auxiliary Oil Cooler</li> 
     </ul> 
    </td> 
    </table> 
    <table style="width: 30%; margin-bottom: 5px;font-size:12px;float: left;display: inline-block;"> 
    <tr> 
     <td style="width: 10%; vertical-align: top;"> 
     <div class="accent-color2" style="width: 100px; padding: 0px 10px;"><b>In_Car_Entertainment:</b></div> 
     </td> 
    </tr> 
    <td style="width: 30%; padding-right: 5px; vertical-align: top;"> 
     <ul style="padding-left: 10px;"> 
     <li>Uconnect Infotainment</li> 
     </ul> 
    </td> 
    </table> 
    <table style="width: 30%; margin-bottom: 5px;font-size:12px;float: left;display: inline-block;"> 
    <tr> 
     <td style="width: 10%; vertical-align: top;"> 
     <div class="accent-color2" style="width: 100px; padding: 0px 10px;"><b>Instrumentation:</b></div> 
     </td> 
    </tr> 
    <td style="width: 30%; padding-right: 5px; vertical-align: top;"> 
     <ul style="padding-left: 10px;"> 
     <li>Clock</li> 
     <li>Digital Odometer</li> 
     <li>Driver Information System</li> 
     <li>External Temperature Display</li> 
     <li>Tachometer Gauge</li> 
     <li>Multi-Function Display</li> 
     <li>Trip Computer</li> 
     <li>2 Trip Odometer</li> 
     <li>Low Fuel Level Warnings and Reminders</li> 
     </ul> 
    </td> 
    </table> 
    <table style="width: 30%; margin-bottom: 5px;font-size:12px;float: up;display: inline-block;"> 
    <tr> 
     <td style="width: 10%; vertical-align: top;"> 
     <div class="accent-color2" style="width: 100px; padding: 0px 10px;"><b>Lights:</b></div> 
     </td> 
    </tr> 
    <td style="width: 30%; padding-right: 5px; vertical-align: top;"> 
     <ul style="padding-left: 10px;"> 
     <li>Daytime Running Lights</li> 
     <li>Auto Delay Off Headlights</li> 
     <li>Led Taillights</li> 
     </ul> 
    </td> 
    </table> 
</table> 

Answer 1

これは、テーブルを使用する必要がある場合の割り当てですか？そうでない場合、テーブルはここでは適切なツールではありません。

フレックスボックスを練習したかったので、一緒に入れてみました。フレックスコンテナの高さはラップさせるためのハックですが、周囲のコードはわかりません。おそらく、すでに高さが制約されています。

https://jsfiddle.net/dgrogan/ua4cn5d8/

そして、私はMULTICOLを練習したかった - https://jsfiddle.net/dgrogan/jLsgpxy1/

このコードは、フレックスです：

body { 
 
    font-size: 12px; 
 
} 
 

 
#container { 
 
    outline: 1px solid pink; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height:300px; /* otherwise this container can grow down indefinitely*/ 
 
} 
 

 
.section { 
 
    outline: 1px solid lightblue; 
 
    width: 30%; 
 
}

<div id="container"> 
 
    <div class="section"> 
 
    <b>Comfort_Features:</b> 
 
    <br> 
 
    <ul style="padding-left: 10px;"> 
 
     <li>Rear Center Folding With Storage and Pass-Thru Armrests</li> 
 
     <li>Carpet Floor Mats</li> 
 
     <li>Carpet Floors</li> 
 
     <li>Front Floor Mats</li> 
 
     <li>Chrome Interior Accents</li> 
 
     <li>Simulated Alloy Shift Knob Trim</li> 
 
     <li>Urethane Steering Wheel Trim</li> 
 
    </ul> 
 
    </div> 
 
    <div class="section"> 
 
    <b>Drivetrain:</b> 
 
    <br> 
 
    <ul style="padding-left: 10px;"> 
 
     <li>4.11 Axle Ratio</li> 
 
    </ul> 
 
    </div> 
 
    <div class="section"> 
 
    <b>Engine:</b> 
 
    <br> 
 
    <ul style="padding-left: 10px;"> 
 
     <li>140 Amps Alternator</li> 
 
     <li>600 Cca Battery Rating</li> 
 
     <li>Battery Saver</li> 
 
     <li>Maintenance-Free Battery</li> 
 
     <li>50 State Emissions</li> 
 
     <li>Auxiliary Oil Cooler</li> 
 
    </ul> 
 
    </div> 
 
    <div class="section"> 
 
    <b>In_Car_Entertainment:</b> 
 
    <br> 
 
    <ul style="padding-left: 10px;"> 
 
     <li>Uconnect Infotainment</li> 
 
    </ul> 
 
    </div> 
 
    <div class="section"> 
 
    <b>Instrumentation:</b> 
 
    <br> 
 
    <ul style="padding-left: 10px;"> 
 
     <li>Clock</li> 
 
     <li>Digital Odometer</li> 
 
     <li>Driver Information System</li> 
 
     <li>External Temperature Display</li> 
 
     <li>Tachometer Gauge</li> 
 
     <li>Multi-Function Display</li> 
 
     <li>Trip Computer</li> 
 
     <li>2 Trip Odometer</li> 
 
     <li>Low Fuel Level Warnings and Reminders</li> 
 
    </ul> 
 
    </div> 
 
    <div class="section"> 
 
    <b>Lights:</b> 
 
    <br> 
 
    <ul style="padding-left: 10px;"> 
 
     <li>Daytime Running Lights</li> 
 
     <li>Auto Delay Off Headlights</li> 
 
     <li>Led Taillights</li> 
 
    </ul> 
 
    </div> 
 
</div>