Table 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

如果您想让表格中的所有列都具有相同的宽度，请尝试以下代码：

table {
     table-layout: fixed;
}

Further Reference Link

Answer 2

我想你想要一个固定大小的 td（不是 table）并且打破比 td 的大小更长的单词。

您可以使用以下 css 解决您在不同浏览器上的问题。

.wrapword{
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
word-break: break-all;
white-space: normal;
}

<td class="wrapword">
</td>

Answer 3

使用以下 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;
}

Answer 4

给你添加这个样式CSS,

.CSSTable td {
   word-wrap: break-word;
   white-space: normal;
   word-break: break-all;
}

Table Css 本地和远程站点不同

Table Css differs in local and remote site

html

css

css-tables