html - 如何在具有固定布局的 标签的下一行打印字符？

Question

每当我尝试在 <td> 中添加更多字符时标签，表格会根据大小展开。我用 table-layout:fixed;和 overflow:scroll;克服这一点，但缺少一些字符。我需要在 <td> 的下一行中打印字符标签。

    .styletable {
    margin:0px;padding:0px;
    width:97.9%;
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #000000;

    -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;
}.styletable table{
    border-collapse: collapse;
        border-spacing: 0;
    width:100%;
    height:100%;
    margin:0px;padding:0px;
         table-layout:fixed;

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

}
.styletable tr:nth-child(odd){ 
    background-color:#e5e5e5; 
}
.styletable tr:nth-child(even){ 
    background-color:#ffffff;
}

.styletable td{
    vertical-align:middle;
    white-space: nowrap;
     overflow:inherit;

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

    background-color:#cccccc;
    border:0px solid #000000;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-size:14px;
    font-family:Arial;
    font-weight:bold;
    color:#000000;
}
.styletable tr:first-child:hover td{
    background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
    background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");  background: -o-linear-gradient(top,#cccccc,b2b2b2);

    background-color:#cccccc;
}
.styletable tr:first-child td:first-child{
    border-width:0px 0px 1px 0px;
}
.styletable tr:first-child td:last-child{
    border-width:0px 0px 1px 1px;
}

HTML

<div class="styletable" >
    <table >
        <tr>
            <td>
                Title 1
            </td>
            <td >
                Title 2
            </td>
            <td>
                Title 3
            </td>
        </tr>
        <tr>
            <td >
                Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1Row1
            </td>
            <td>
                Row 1
            </td>
            <td>
                Row 1
            </td>
        </tr>
        <tr>
            <td >
                Row 2
            </td>
            <td>
                Row 2
            </td>
            <td>
                Row 2
            </td>
        </tr>
        <tr>
            <td >
                Row 2
            </td>
            <td>
                Row 2
            </td>
            <td>
                Row 2
            </td>
        </tr>
        <tr>
            <td >
                Row 3
            </td>
            <td>
                Row 3
            </td>
            <td>
                Row 3
            </td>
        </tr>
    </table>
</div>

Answer 1

您需要使用 css 上的 width 或 max-width 元素来固定宽度

td{
    max-width: 100px;
}

对于特定的 td，使用 ID 或 CLASS 并以这种方式进行编辑

.td, #td {
    max-width: 100px;
}