告诉你一个非常好用的css样式，特别好用
box-sizing: border-box
即使加了padding或者margin属性都会有奇效哦
另外，你上面的滚动条改为overflow: auto
至于高度百分比问题，需要设置一下：
html,body{height:100%}
而且，你所设置80%高度的标签父级标签也要设一下，我随便写了一个案例，你看看，本来加了padding后实际显示的高度会大于设置的高度，但是加了box-sizing: border-box后，显示的高度还是50%
<style type="text/css">html,body{ height:100% margin:0 padding:0}
</style>
</head>
<body>
<div style=" height:100% background:red">
<div style=" height:600px background:blue">
<div style=" height:50% background:green padding:50px overflow:auto box-sizing: border-box">
<div style="height:1000px background:black color:white">这是内容部分</div>
</div>
</div>
</div>
</body>
/*屏幕宽度小于600px时触发*/@media screen and (max-width: 600px){
table{
border:0
}
table thead{
display: none
}
table tr{
margin-bottom: 10px
display: block/*设置成块级元素实现换行*/
border-bottom: 2px solid #ddd
}
table td{
display: block
text-align: right
font-size: 13px
border-bottom: 1px dotted #ccc
}
table td:last-child{
border-bottom: 0
}
table td:before{/*模拟标题的效果*/
content:attr(data-label)
float: left
text-transform: uppercase
font-weight: bold
}
}
最简单和常用的方法就是按照最长的字数设定一个表格宽度或者用百分比来设定这个单元格宽度
用css
要么就是设定最长字数宽度
要么就是多余文字不显示
其他就得另想办法,不是单纯css解决
