这是我目前的表格:
我希望缩小两个按钮之间的间隙,并将按钮更多地移向文本内容。但是,如果我输入一些非常长的文本,或者在大/小屏幕上查看,我仍然希望表格能够调整。
这是我目前的HTML:
<table cellspacing="0" rules="all" border="1" style="border-collapse:collapse;">
<thead>
<tr>
<th scope="col">Manufacturer</th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="fullWidth">Arrow International</td>
<td class="fixedWidth"><input type="button" value="Report" class="button" /></td>
<td class="fixedWidth"><input type="button" value="Delete" class="button" /></td>
</tr>
<tr>
<td class="fullWidth">Cardinal Health</td>
<td class="fixedWidth"><input type="button" value="Report" class="button" /></td>
<td class="fixedWidth"><input type="button" value="Delete" class="button" /></td>
</tr>
<tr>
<td class="fullWidth">DeRoyal</td>
<td class="fixedWidth"><input type="button" value="Report" class="button" /></td>
<td class="fixedWidth"><input type="button" value="Delete" class="button" /></td>
</tr>
<tr>
<td class="fullWidth">Kimberly-Clark</td>
<td class="fixedWidth"><input type="button" value="Report" class="button" /></td>
<td class="fixedWidth"><input type="button" value="Delete" class="button" /></td>
</tr>
</tbody>
这是我目前的CSS:
#main-content table {
width: 100%;
border-collapse: collapse;
}
#main-content table thead th {
font-weight: bold;
font-size: 15px;
border-bottom: 1px solid #ddd;
}
#main-content tbody {
border-bottom: 1px solid #ddd;
}
#main-content tbody tr {
background: #fff;
}
#main-content tbody tr.alt-row {
background: #f3f3f3;
}
#main-content table td,
#main-content table th {
padding: 10px;
line-height: 1.3em;
}
#main-content table tfoot td .bulk-actions {
padding: 15px 0 5px 0;
}
#main-content table tfoot td .bulk-actions select {
padding: 4px;
border: 1px solid #ccc;
}
#main-content td .fixedWidth {
white-space: nowrap;
width: 0%;
}
#main-content td .fullWidth {
width: 100%;
white-space: normal;
}
我一直在试验白色空间:nowrap但尚未找到解决方案!
我关闭了吗?
答案 0 :(得分:2)
您的表格总是调整为100%,在CSS中更改:
#main-content table {
/*width: 100%;*/
border-collapse: collapse;
}
这会将表格调整为内容宽度。
答案 1 :(得分:2)
也许是这样的? http://jsfiddle.net/tEyQH/
#main-content table thead th:last-child {
width: 100%;
}
答案 2 :(得分:0)
我确信某人有一个适用于所有浏览器的CSS解决方案,但我发现解决这个问题的最快方法(也就是说,不要浪费钱),就是使用{{1元素及其下面的元素:
<colgroup/>
然后在样式表中设置col元素的宽度。