把欄位的所有寬度拿掉 table 一樣 100%
拿掉 table-layout:fixed; 然後

.content {
    /* 省略... */
    white-space: nowrap;
 }

外框設定寬度(目前為17cm)，裡面的表格的寬度可以符合外框設定的寬度，且可以依據內容找到符合的寬度

我沒理解錯的話
你希望外框的寬度要是17公分，又希望外框的寬度根據表格的欄位內容伸縮？？？

再來關於你的第二點：

但是表格內的寬度卻是均分，無法依照內容去制定寬度

我修改欄位A的 width寬度 結果有改變阿，其他欄位均分後總寬度=17公分
不然你其他的寬度是要給誰？？？

<td class='grayTitle' style='width:1cm;'>A</td>

歸零CSS或是叫reset css
以下是基本的

因為不同瀏覽器的預設寬度有各自的解讀。
最好先做一下reset再開始重新定義。

我個人還會對img做去框線去寬度的定義。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}