摆脱表中的填充

时间：2017-12-11 12:21:20

标签： html css

我有一个表，我希望它的标题占用所有5列。确实如此，但是在标题和表格边框之间有一点填充，我无法摆脱它。我需要标题来占据表格的整个宽度。有什么建议吗？

＆＃13;
＆＃13; 
.foo {
    min-width: 250px;
    width: auto;
    text-align: center;
    min-height: 30px;
    border: 1px solid #515151;
    border-radius: 6px;
    position: absolute;
    padding: 0;
    background: url(images/comment-bg3.png) repeat;
    overflow: hidden;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
    box-shadow: 5px 5px rgba(0,0,0, 0.1);
}

.thClass {
    margin-left: -3px;
    text-align: center;
    background: url(images/comment-bg2.png) repeat;
    box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    margin-top: -2px;
    min-height: 30px;
    line-height: 30px;
    font-size: 19px;
    cursor: move;
}

.header{
    margin-left: 17px;
}

.tableBody {
    display: block;
    min-height: 25px;
    text-align: center;
    width: 102%;
    margin-left: -2px;
    cursor: default;
}

.foo tbody tr td {
    display: block;
    line-height: 25px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

#displaySizes {
    list-style: none;
    padding: 0;
    margin-top: 0;
}

.disp tbody tr th {
    column-span: all;
    border: 1px solid black;
}

.disp tbody tr td {
    display: table-cell;
}
＆＃13; 
<table class="foo disp elementTable">
                <tr class="tableHeader">
                    <th class="thClass" colspan="5">
                        <span class="header">Device</span>
                        <span class="settings">
                            <img src="Icons/pignon.png" width="17px" height="17px" alt="Settings" title="Settings" />
                        </span>
                    </th>
                </tr>
                <tr>
                    <td rowspan="4" id="sizeContainer">
                        <ul id="displaySizes">
                            <li>4:3</li>
                            <li>16:9</li>
                            <li>Clock</li>
                        </ul>
                    </td>
                    <td>$100</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
            </table>
＆＃13;
＆＃13;
＆＃13;

执行此操作的一种方法是设置标头display:block;，然后设置其width:102%;，但在这种情况下colspan="5"不起作用。这是一个让你玩代码的小提琴：https://jsfiddle.net/vaxobasilidze/b996809u/

2 个答案:

答案 0 :(得分：3)

使用border-spacing属性。在下面的snipet我使用了0px。浏览器默认使用2px 

.foo {
    min-width: 250px;
    width: auto;
    text-align: center;
    min-height: 30px;
    border: 1px solid #515151;
    border-radius: 6px;
    position: absolute;
    padding: 0;
    background: url(images/comment-bg3.png) repeat;
    overflow: hidden;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
    box-shadow: 5px 5px rgba(0,0,0, 0.1);
    border-spacing: 0px;
}

.thClass {
    margin-left: -3px;
    text-align: center;
    background: url(images/comment-bg2.png) repeat;
    box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    margin-top: -2px;
    min-height: 30px;
    line-height: 30px;
    font-size: 19px;
    cursor: move;
    padding:0;
}

.header{
    margin-left: 17px;
}

.tableBody {
    display: block;
    min-height: 25px;
    text-align: center;
    width: 102%;
    margin-left: -2px;
    cursor: default;
}

.foo tbody tr td {
    display: block;
    line-height: 25px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

#displaySizes {
    list-style: none;
    padding: 0;
    margin-top: 0;
}

.disp tbody tr th {
    column-span: all;
    border: 1px solid black;
}

.disp tbody tr td {
    display: table-cell;
}
<table class="foo disp elementTable">
                <tr class="tableHeader">
                    <th class="thClass" colspan="5">
                        <span class="header">Device</span>
                        <span class="settings">
                            <img src="Icons/pignon.png" width="17px" height="17px" alt="Settings" title="Settings" />
                        </span>
                    </th>
                </tr>
                <tr>
                    <td rowspan="4" id="sizeContainer">
                        <ul id="displaySizes">
                            <li>4:3</li>
                            <li>16:9</li>
                            <li>Clock</li>
                        </ul>
                    </td>
                    <td>$100</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
            </table>

答案 1 :(得分：1)

您可以为表格本身设置border-collapse: collapse;。

.foo {
    min-width: 250px;
    width: auto;
    text-align: center;
    min-height: 30px;
    border: 1px solid #515151;
    border-radius: 6px;
    position: absolute;
    padding: 0;
    background: url(images/comment-bg3.png) repeat;
    overflow: hidden;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
    box-shadow: 5px 5px rgba(0,0,0, 0.1);
    border-collapse: collapse;
}

.thClass {
    margin-left: -3px;
    text-align: center;
    background: url(images/comment-bg2.png) repeat;
    box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    margin-top: -2px;
    min-height: 30px;
    line-height: 30px;
    font-size: 19px;
    cursor: move;
}

.header{
    margin-left: 17px;
}

.tableBody {
    display: block;
    min-height: 25px;
    text-align: center;
    width: 102%;
    margin-left: -2px;
    cursor: default;
}

.foo tbody tr td {
    display: block;
    line-height: 25px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

#displaySizes {
    list-style: none;
    padding: 0;
    margin-top: 0;
}

.disp tbody tr th {
    column-span: all;
    border: 1px solid black;
}

.disp tbody tr td {
    display: table-cell;
}
<table class="foo disp elementTable">
                <tr class="tableHeader">
                    <th class="thClass" colspan="5">
                        <span class="header">Device</span>
                        <span class="settings">
                            <img src="Icons/pignon.png" width="17px" height="17px" alt="Settings" title="Settings" />
                        </span>
                    </th>
                </tr>
                <tr>
                    <td rowspan="4" id="sizeContainer">
                        <ul id="displaySizes">
                            <li>4:3</li>
                            <li>16:9</li>
                            <li>Clock</li>
                        </ul>
                    </td>
                    <td>$100</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                    <td>February</td>
                </tr>
            </table>

相关问题
最新问题