Question

目前我只是将页面设计为概念验证，我试图将表格的第一项设置为固定大小（100px）。但是该列几乎从不是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/

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

1 个答案: