大佬教程收集整理的这篇文章主要介绍了css – 表体不占用全表宽度,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我认为表行将从表中继承它们的大小,然后表格单元格将是其中的四分之一.当设备宽度为768px或更高时,这似乎有效.当设备宽度较小时,行的大小将根据最大单元格中的文本进行调整,而不是父表的大小.
我在下面添加了一些示例代码,在不同元素上使用背景着色来突出显示错误(通过水平调整窗口大小来显示).错误以黄色突出显示(基础表颜色可见).
实例:http://pastehtml.com/view/cqrwl31z2.html
我在Chrome和Safari中测试过.
<!DOCTYPE html> <html> <head> <title>Table Test</title> <!-- Bootstrap --> <link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> td,th { width: 25% !important; } table { BACkground-color: yellow; } tr { BACkground-color: gray; } th { BACkground-color: aqua; } td:nth-child(1) { BACkground-color: red; } td:nth-child(2) { BACkground-color: green; } td:nth-child(3) { BACkground-color: blue; } td:nth-child(4) { BACkground-color: purple; } </style> </head> <body> <div class="container"> <h1>Hello,world!</h1> <div class="row"> <table class="span12"> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <tr> </tbody> </table> </div> <div class="row"> <table class="span12"> <thead> <tr> <th>Longer Table</th> <th>Headers In</th> <th>This</th> <th>Table</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <tr> </tbody> </table> </div> </div> </body> </html>
[class*="span"],.uneditable-input[class*="span"],.row-fluid [class*="span"] { display: table; }
也许在表格上使用网格类不是一个好主意.相反,在包装器div上使用.span12并将表设置为width:100%.
以上是大佬教程为你收集整理的css – 表体不占用全表宽度全部内容,希望文章能够帮你解决css – 表体不占用全表宽度所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。