テーブルに表示している文字に合わせて<th>タグの幅を変更したいです。

Question

テーブルに表示している文字に合わせて<th>タグの幅を変更したいです。
調べて色々試しましたが、うまく行かなかったのでご質問させて頂きます。
お手数ですが、実現方法のご教授をよろしくお願いいたします。

<table class="table1">
  <tr><th>項目A</th><td>A-1</td>
  <tr><th>項目B</th><td>B-1</td>
  <tr><th>項目C</th><td>C-1</td>
  <tr><th>項目D</th><td>D-1</td>
  <tr><th>項目E</th><td>E-1</td>
  <tr><th>項目F</th><td>F-1</td>
</table>

.table1{
  border-collapse: separate;
  border-spacing: 0px 5px;
  margin: 0 auto; 
}
.table1 td,th{
  padding: 10px;
}
.table1 th{
  background: #10a0e0;
  color: #fff;
}
.table1 td{
  background: #f1fafe;
}

現状

Answer 1

これでいけるんじゃないですかね？

セルのwidthを狭くしておいて
nowrapにすればいけた。

table {
    width: 100%;
}
table th {
    white-space: nowrap;
    width: 100px;
}

引用：テーブルのセル横幅を文字数に合わせて可変にする

Comments

[xss]

aozukiさんご回答ありがとうございます。
参考になりました。
感謝いたします。