ChaCol ChaCol - 1 year ago 108
CSS Question

How do I make my inline-block table expand to 100% width?

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

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: enter image description here


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%">
<th style="border-bottom: 1px solid black;">Key Skills</th>
<td>This is a main summary of my skills.</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>

Answer Source

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

Bonus -

This example should implemented what all you want:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download