当我添加溢出隐藏属性时,右边的填充没有设置

时间:2015-09-03 08:46:24

标签: html css html5 css3

我有点困惑,当我将溢出设置到我的表格单元格中时,右边填充不起作用,我该怎么做。我从很久以来就一直在寻找,但我找不到任何解决办法。感谢。

HTML CODE

<div class="ni-table">
        <div class="ni-table-header">
            <div class="ni-table-cell">
                <span contenteditable="false">GMTtype</span>

            </div>
            <div class="ni-table-cell">
                <span contenteditable="false">FabOpt</span>

            </div>
            <div class="ni-table-cell">
                <span contenteditable="false">Sector</span>

            </div>
            <div class="ni-table-cell">
                <span contenteditable="false">Wstg%</span>

            </div>
        </div>
        <div class="ni-table-row">
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">Gents T-shirtdddddddddddddddddddddddddddddddddddddddddddddddddddd</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">Knitting</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">2</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">10</span>

            </div>
        </div>
        <div class="ni-table-row">
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">Gents T-shirtdddddddddddddddddddddddddddddddddddddddddddddddddddd</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">Knitting</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">2</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">10</span>

            </div>
        </div>
        <div class="ni-table-row">
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">Gents T-shirtdddddddddddddddddddddddddddddddddddddddddddddddddddd</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">Knitting</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">2</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">10</span>

            </div>
        </div>
        <div class="ni-table-row">
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">Gents T-shirtdddddddddddddddddddddddddddddddddddddddddddddddddddd</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">Knitting</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">2</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">10</span>

            </div>
        </div>
        <div class="ni-table-row">
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">Gents T-shirtdddddddddddddddddddddddddddddddddddddddddddddddddddd</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">Knitting</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">2</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">10</span>

            </div>
        </div>
        <div class="ni-table-row">
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">Gents T-shirtdddddddddddddddddddddddddddddddddddddddddddddddddddd</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">Knittinggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">2</span>

            </div>
            <div class="ni-table-cell ni-clickable">
                <span contenteditable="false">10</span>

            </div>
        </div>
    </div>

CSS代码

.ni-table {
    display: table;
    min-width: 100%;
    margin-bottom: 0px;
    border-spacing: 0;
    background: #fff;
    margin: 0px;
    table-layout: fixed;
    border-collapse: collapse;
    width: 1px;
    height: 1px;
}
.ni-table > .ni-table-header, .ni-table > .ni-table-row, .ni-table > .ni-table-footer {
    display: table-row;
    min-height: 22px;
}
.ni-table > .ni-table-header > .ni-table-cell, .ni-table > .ni-table-row > .ni-table-cell, .ni-table > .ni-table-footer > .ni-table-cell {
    display: table-cell;
    /*border: 1px solid #bdbdbd;*/
    border-bottom: none;
    border-right: none;
    padding: 5px;
    height: 22px;
    vertical-align: middle;
    /*text-align: center;*/
    overflow: hidden;
}
.ni-table > .ni-table-header > .ni-table-cell, .ni-table > .ni-table-row > .ni-table-cell, .ni-table > .ni-table-footer > .ni-table-cell:first-child {
    border-bottom: 1px solid #bdbdbd;
}
/*.ni-table > .ni-table-header > .ni-table-cell, .ni-table > .ni-table-row > .ni-table-cell, .ni-table > .ni-table-footer > .ni-table-cell:last-child {
                border-bottom: none;
            }*/
 .ni-table > .ni-table-header .ni-table-cell:last-child, .ni-table > .ni-table-row .ni-table-cell:last-child, .ni-table > .ni-table-footer .ni-table-cell:last-child {
    border-right: 1px solid #e0e0e0;
}
.ni-table > .ni-table-header {
    background: rgb(224, 224, 224);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(224, 224, 224, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(224, 224, 224, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(224, 224, 224, 1)), color-stop(50%, rgba(189, 189, 189, 1)), color-stop(100%, rgba(224, 224, 224, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(224, 224, 224, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(224, 224, 224, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(224, 224, 224, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(224, 224, 224, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(224, 224, 224, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(224, 224, 224, 1) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(224, 224, 224, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(224, 224, 224, 1) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#e0e0e0', GradientType=0);
    /* IE6-9 */
    text-align: left;
}
.ni-table > .ni-table-header > .ni-table-cell {
    color: #000;
    min-height: 22px;
    font-size: 12px;
    padding: 0px 3px;
    border-right: 1px solid #e0e0e0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}
.ni-table > .ni-table-header > .ni-table-cell span {
    width: 100%;
    text-align: center;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 22px;
    line-height: 22px;
}
.ni-table > .ni-table-row > .ni-table-cell {
    color: #000;
    min-height: 22px;
    font-size: 12px;
    /*padding: 0px 3px;*/
    border-right: 1px solid #e0e0e0;
    overflow: hidden;
    text-align: left;
    /* text-overflow: ellipsis; */
    white-space: nowrap;
    position: relative;
    box-sizing: border-box;
    /* display: block; */
}

Fiddle

1 个答案:

答案 0 :(得分:1)

将单元格内容从span更改为div。对您的所有单元格内容重复此操作:

<span contenteditable="false">Wstg%</span>

<div contenteditable="false">Wstg%</div>

并添加到您的CSS

 .ni-table > .ni-table-row > .ni-table-cell > div{
     overflow: hidden
 }

您可以在小提琴http://jsfiddle.net/78066ms4/1/

中看到结果