我有点困惑，当我将溢出设置到我的表格单元格中时，右边填充不起作用，我该怎么做。我从很久以来就一直在寻找，但我找不到任何解决办法。感谢。
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; */
}
答案 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
}