表列固定大小没有给出预期的结果，为什么不呢？

Question

目前我只是设计一个页面作为概念验证，并且我正在尝试将表格的第一项设置为固定大小（100 像素）。但该列几乎从不完全是 100px，有时是 101px，有时更多，有时甚至更少。当我得到宽度正好为 100px 时，整个表格存在问题（宽度！= 100%）

表格布局主要由bootstrap css提供，但是对于宽度（和图像大小）我自己写了一点css。我不是 100% 确定这是必要的。

在我试图创建它的 html 和 css（不是引导程序）下方。

HTML：

<table class="table-striped table-hover table-condensed table-responsive table-bordered conexio-table">
        <tr>
            <th>Status</th>
            <th>Foto</th>
            <th>Naam</th>
            <th>Adres</th>
            <th>E-mailadres</th>
        </tr>
        <!-- Contact -->
        <tr>
            <td class="conexio-table-img">
                <img class="img-thumbnail" src="~/Icons/Contacts.png" alt="Information contact" />
                <img class="img-thumbnail" src="~/Icons/Error.png" alt="Information Error" />
                <img class="img-thumbnail" src="~/Icons/Conflicts.png" alt="Information conflicts" /><br />
                <img class="img-thumbnail" src="~/Icons/Doubtfuls.png" alt="Information doubtful" />
                <img class="img-thumbnail" src="~/Icons/Duplicates.png" alt="Information duplicates" />
                <img class="img-thumbnail" src="~/Icons/Duplicates.png" alt="Information duplicates" />
            </td>
            <td class="conexio-table-img">
                <img class="img-thumbnail" src="~/Images/Temp/photo.jpg" alt="Profile picture" />
            </td>
            <td>Bobby Hippo</td>
            <td>companystreet 123, 9999 worktown</td>
            <td>bob@b-bob.hippopotamus</td>
        </tr> 
        <!-- Contact -->
        <tr>
            <td class="conexio-table-img">
                <img class="img-thumbnail" src="~/Icons/Contacts.png" alt="Information contact" />
                <img class="img-thumbnail" src="~/Icons/Error.png" alt="Information error" />
            </td>
            <td class="conexio-table-img">
                <img class="img-thumbnail" src="~/Images/empty_profile.jpg" alt="Profile picture" />
            </td>
            <td>Gerry Giraffe</td>
            <td>2260 Westerlo, Antwerpen, België</td>
            <td>gerry@g-gerry.giraffe</td>
        </tr>
</table>

CSS：

.conexio-table {
width: 100%;
table-layout: fixed;
}

.conexio-table th:first-child td:first-child {
    width: 100px;
    overflow: hidden;
}

.conexio-table td {
    vertical-align: middle;
}

.conexio-table-img img {
    height: 25px;
    width: 25px;
 }

Answer 1

如果我理解正确，您可以添加<col width="100px">。如小提琴所示： http://jsfiddle.net/t2fagera/