如何模仿<table border="2“cellpadding="5”cellspacing="0“width="40%">
如何模仿<table border="2“cellpadding="5”cellspacing="0“width="40%">
提问于 2012-06-25 12:03:25
我有一个简单的html表元素。
<table border="2" cellpadding="5" cellspacing="0" width="40%">
<tr><td> aaa </td><td> bbb </td></tr>
<tr><td> ccc </td><td> ddd </td></tr>
</table>现在完成CSS中的第一步，我尝试尝试将后一个表样式定义为CSS。
我做不到--无论我做什么，边界看起来都不一样。请帮忙，
我的CSS样式的HTML：
<style type="text/css">
table.my_class
{
width:40%;
}
table.my_class,table.my_class tr, table.my_class td
{
border-color: black;
border-width: 2px;
border-style:groove;
padding:15px;
border-collapse:collapse;
}
</style>
<table class="my_class">
<tr><td> aaa </td><td> bbb </td></tr>
<tr><td> ccc </td><td> ddd </td></tr>
</table>回答 3
Stack Overflow用户
回答已采纳
发布于 2012-06-25 12:24:24
HTML
<table border="2" cellpadding="5" cellspacing="0" width="40%">
<tr><td> aaa </td><td> bbb </td></tr>
<tr><td> ccc </td><td> ddd </td></tr>
</table>
<br/>
<table class="mytable">
<tr><td> aaa </td><td> bbb </td></tr>
<tr><td> ccc </td><td> ddd </td></tr>
</table>这里是没有reset.css CSS的解决方案。
table.mytable {
width: 40%;
border: 2px solid #444;
border-spacing: 0;
}
table.mytable tr {border-bottom: 1px solid #444}
table.mytable td{
border-right: 1px solid #444;
border-bottom: 1px solid #444;
padding: 5px;
}
table.mytable tr td:last-child{ border-right: 0 }
table.mytable tr:last-child td{ border-bottom: 0 }这里是reset.css CSS的解决方案。
table.mytable {
width: 40%;
border: 2px solid #000;
}
table.mytable td{
border: 1px solid #000;
}
Stack Overflow用户
发布于 2012-06-25 12:35:45
我不认为你能用你喜欢的方式准确地转换这些属性.因为在当时，标准并没有应用到这个程度，而且通常情况在不同的浏览器中是不同的。你最好的办法就是试着把它调近点。
<!doctype HTML>
<html>
<head>
<title></title>
<meta content="">
<style>
.tbl
{
width:40%;
border: solid 2px black;
border-collapse: collapse;
}
.tbl td
{
padding: 5px;
border: solid 2px black;
}
</style>
</head>
<body>
<table border="2" cellpadding="5" cellspacing="0" width="40%">
<tr><td> aaa </td><td> bbb </td></tr>
<tr><td> ccc </td><td> ddd </td></tr>
</table>
<br/><br/>
<table class="tbl">
<tr><td> aaa </td><td> bbb </td></tr>
<tr><td> ccc </td><td> ddd </td></tr>
</table>
</body>
</html>Stack Overflow用户
发布于 2012-06-25 13:29:14
当使用带有border属性的未样式表时，边框在不同的浏览器中看起来不同。有些浏览器绘制坚实的边框，有些浏览器为表绘制起始边框，为单元格绘制内嵌边框等。在CSS中无法实现这种变化。一点也不需要。只需选择首选的呈现，在考虑了CSS必须提供的各种工具之后，这些工具大大超出了表示HTML属性的能力(除了创建一些浏览器依赖项)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11189005
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号