html - 表 Css 在本地和远程站点中不同

Question

我正在研究 web site显示许多表格，我想显示相同大小的表格而不考虑单词的长度。事实上，我想打破沉默。

我在本地主机中使用了以下 css，一切正常:

.CSSTable {
    margin:0px;padding:0px;
    width:75%;
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #3f7f00;
    font-size: 85%;
    line-height: 110%;
    table-layout: fixed;


    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;

    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;

    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;

    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}.CSSTable table{
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
    height:100%;
    margin:0px;padding:0px; 
}.CSSTable a{
    color: #333;

}.CSSTable tr:last-child td:last-child {
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
}
.CSSTable table tr:first-child td:first-child {
    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}
.CSSTable table tr:first-child td:last-child {
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;
}.CSSTable tr:last-child td:first-child{
    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;
}.CSSTable tr:hover td{

}
.CSSTable tr:nth-child(odd){ background-color:#d4ffaa; }
.CSSTable tr:nth-child(even)    { background-color:#ffffff; }.CSSTable td{
    vertical-align:middle;


    border:1px solid #3f7f00;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    font-weight:bold;
    color:#000000;
}.CSSTable tr:last-child td{
    border-width:0px 1px 0px 0px;
}.CSSTable tr td:last-child{
    border-width:0px 0px 1px 0px;
}.CSSTable tr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
}
.CSSTable tr:first-child td{
        background:-o-linear-gradient(bottom, #5fbf00 5%, #3f7f00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #3f7f00) );
    background:-moz-linear-gradient( center top, #5fbf00 5%, #3f7f00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#3f7f00");  background: -o-linear-gradient(top,#5fbf00,3f7f00);

    background-color:#5fbf00;
    border:0px solid #3f7f00;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-weight:bold;
    color:#ffffff;
}
.CSSTable tr:first-child:hover td{
    background:-o-linear-gradient(bottom, #5fbf00 5%, #3f7f00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #3f7f00) );
    background:-moz-linear-gradient( center top, #5fbf00 5%, #3f7f00 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#3f7f00");  background: -o-linear-gradient(top,#5fbf00,3f7f00);

    background-color:#5fbf00;
}
.CSSTable tr:first-child td:first-child{
    border-width:0px 0px 1px 0px;
}
.CSSTable tr:first-child td:last-child{
    border-width:0px 0px 1px 1px;
}.CSSTable p{
    word-wrap: break-word;
}
.iconCulomn {
    width: 5%;
}

然而，在远程站点中，表格仍然被扩展并且其中没有中断词。

谁能帮帮我？

Answer 1

使用以下 CSS 解决您的问题。

.CSSTable td{
word-break: break-all;
white-space: normal;
word-wrap: break-word; /* Internet Explorer */
white-space: pre-wrap; 
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
white-space: -webkit-pre-wrap;
}