我用表创建一个页面。我想打破一个回应的话。 这是我的CSS代码,
body{
border:0px;
margin:0px;
width:100%;
padding:0;
height:100%;
}
#container{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.right-panel {
-webkit-flex-grow: 1;
flex-grow: 1;
}
.left-panel{
width:220px;
min-height:100vh;
background-color:#222;
}
.right-panel{
min-height:100vh;
background-color:#eef0ed;
}
table{
width:100%;
word-break: break-all;
word-wrap: break-word;
table-layout: auto;
}
td{
border-bottom:1px solid #ccc;
}
.left{
float:left;
}
.right{
float:right;
}
.clear{
clear:both;
}
这是我的HTML代码,
<body><div id="container"><div class="left-panel">
</div><div class="right-panel"><div id="content">
<div class="container-table">
<table class="tb">
<tr>
<th>
Pasdaddadadad
</th>
<th>
SPasdaddadadad
</th>
<th>
DPasdaddadadad
</th>
<th>
LPasdaddadadad
</th>
<th>
APasdaddadadad
</th>
</tr>
<tr>
<td>
POPasdaddadadad
</td>
<td>
PePasdaddadadad
</td>
<td>
MaPasdaddadadad
</td>
<td>
asdadadadadada
</td>
<td>
asdadadadadada
</td>
</tr>
</table>
</div>
</div></div></div></body>
我使用了断字。 我把它设置为全部,但它不起作用。 我也用过自动换行。 我把它设置为破解词,但仍然不起作用。
我累了桌子布局:固定。 我认为这条线可以使它发挥作用。但是有一个问题。
在我的布局中,表格应该在右侧。 但是当我使用table-layout:fixed时,它会下降并占据页面宽度的100%。
如何让它保持在右侧? 或表格布局的任何替代方案?