如何使内联块表扩展到100％的宽度？

Question

This is my code below and I'm trying to make it look like this image:

I'm unsure of how to expand the table header all the way to the right. I also don't know how to add more spacing between the bottom border.

For the lazy my code shows this:

 font-family:Arial; font-size:12px; width:800px; } table { border-style: solid; border-color: #cfdaf1; border-width: 1px; border-collapse: collapse; } th { text-align: left; background-color: #cfdaf1; padding: 3px; } td { padding: 10px } #headerMenu { display: inline-block; height: 125px; padding: 5px; border-top: 1px solid black; border-bottom: 1px solid black; } #contactTable { display: inline-block; padding: 3px; margin-bottom: 1px; } #tableHeader { display: inline-block; padding: 3px; margin: 5px; } #ul { list-style: none; padding: 0px; } #ul li:before { content: '►'; margin: 0 1em; } 

 <table id="tableHeader" width="100%"> <tr> <th style="border-bottom: 1px solid black;">Key Skills</th> </tr> <tr> <td>This is a main summary of my skills.</td> </tr> <tr> <td> <ul id="ul" style="list-style-type: none"> <li>Negotiating (Intermediate)</li> <li>Access (Beginner)</li> <li>Accounting (Beginner)</li> <li>Sales Auditing (Expert)</li> <li>Invoicing (Intermediate)</li> </ul> </td> </tr> </table> 

Answer 1

I don't think using a table and set it's display: inline-block is a good idea, revise it with display: table; width: 100% display: table; width: 100% in CSS should make it fill the width, also I would wrap it inside a <div class="container"> for better CSS maintenance

See the example: https://jsfiddle.net/Zay_DEV/a5zwgjz3/

Bonus -

This example should implemented what all you want: https://jsfiddle.net/Zay_DEV/a5zwgjz3/2/

Answer 2

If you prefer a cleaner and tableless version, but still using display: flex; : follows: https://jsfiddle.net/vowpzf47/