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

Question

目前，我只是设计一个页面作为概念证明，我正在尝试将表格的第一项设置为固定大小 (100px)。但是该列几乎从不正好是 100px，有时是 101px，有时甚至更多，有时甚至更少。当我得到宽度正好是 100px 的时候，整个表格都有问题(宽度!= 100%)

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

在我尝试创建它的 html 和 css(不是 Bootstrap )下方。

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"> .正如在 fiddle 上看到的: http://jsfiddle.net/t2fagera/