智能HTML表格列宽

时间:2012-01-29 23:53:05

标签: html css html-table

这是我目前的表格:

enter image description here

我希望缩小两个按钮之间的间隙,并将按钮更多地移向文本内容。但是,如果我输入一些非常长的文本,或者在大/小屏幕上查看,我仍然希望表格能够调整。

jsFiddle link

这是我目前的HTML:

<table cellspacing="0" rules="all" border="1" style="border-collapse:collapse;">
<thead>
    <tr>
        <th scope="col">Manufacturer</th>
        <th scope="col">&nbsp;</th>
        <th scope="col">&nbsp;</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但尚未找到解决方案!

我关闭了吗?

3 个答案:

答案 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元素的宽度。