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

Question

这是我下面的代码，我试图让它看起来像这张图片：

我不确定如何将表头一直扩展到右边。我也不知道如何在底部边框之间添加更多间距。

对于懒惰我的代码显示了这个：

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

我不认为使用table并设置它display: inline-block是一个好主意，在CSS中使用display: table; width: 100%进行修改会使其填充宽度，我也将它包装在<div class="container">内以便更好地进行CSS维护

请参阅示例：https://jsfiddle.net/Zay_DEV/a5zwgjz3/

奖金 -

此示例应实现您想要的所有内容：https://jsfiddle.net/Zay_DEV/a5zwgjz3/2/

Answer 2

如果您更喜欢清洁和无表格版本，但仍使用display: flex;： 如下：https://jsfiddle.net/vowpzf47/