每当我尝试在<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>
答案 0 :(得分:1)
您需要使用css上的width或max-width元素来修复宽度
td{
max-width: 100px;
}
对于特定的td,使用ID或CLASS并以那种方式编辑
.td, #td {
max-width: 100px;
}