.box{ height: 100%; width: 100%; display: flex; .boxleft{ height: 100%; width: 45%; background-color: #FFFFFF; display: flex; flex-direction: column; .lefthead{ display: flex; flex-direction: column; .headdiv{ margin: 0 0 0 30px; height: 40px; span{ font-size: 16px; margin-left: 3px; } input{ margin-left: 15px; position: relative; top: 1px; } } .headthree{ margin-left: 30px; mat-form-field{ width: 150px; } } } .tablediv{ width: 100%; height: 70%; .tbodycss{ overflow-y: auto; height: 600px; width: 100%; } table{ //margin: 20px 20px; margin-left: 10px; margin-right: 10px; width: 97.5%; //border: 1px solid #2196F3; thead{ height:48px; color: #FFFFFF; background-color: #2196F3; font-size: 16px; } tr:nth-child(odd){ background: #FAFAFA; } } } } .boxright{ height: 100%; width: 55%; background-color: #FFFFFF; margin-left: 10px; .word{ width: 100%; height: 100%; //margin: 10px 10px 0 10px; iframe{ height: 94%; width: 97%; margin: 30px 10px 10px 10px; overflow-y: auto; border: medium none; } } #viewer{ margin: 30px 10px 10px 10px; width: 97%; height: 94%; } } } th,td{ height:48px; font-size: 16px; text-align: center; } .green{color: #00C756;} .red{color: #FF4D4D;} .blue{color: #2196F3;} //滚动条样式 ::-webkit-scrollbar{ margin-right: 3px; width: 6px; background-color: white; } ::-webkit-scrollbar-thumb{ background-color: #2196F3; }