如何在 CSS 中模仿 <table border="2" cellpadding="5" cellspacing="0" width
Posted
技术标签:
【中文标题】如何在 CSS 中模仿 <table border="2" cellpadding="5" cellspacing="0" width="40%">【英文标题】：How to mimic <table border="2" cellpadding="5" cellspacing="0" width="40%"> in CSS 【发布时间】：2012-06-26 16:32:13 【问题描述】：我有一个简单的 html 表格元素。
<table border="2" cellpadding="5" cellspacing="0" >
<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>
【问题讨论】：
如果是表格数据，则使用表格。 先关闭“style”类，你已经重复了“padding” 没有规范化/重置 css 我的解决方案被破坏了。我做了其他不需要重置。 Here 你应该知道没有CSS的表格的显示会因浏览器而异。因此，根据用户的不同，您的第一个示例看起来会略有不同。例如，它在 chrome 中的颜色比在 Firefox 中的颜色要深得多。你最好选择自己喜欢的风格并使用它。 是的，我明白了。而真正的“杀手”是 MS Word 的 html 渲染器（由 Outlook 2007 使用）。 【参考方案1】：HTML
<table border="2" cellpadding="5" cellspacing="0" >
<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>
Here 是没有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
Here 是 reset.css 的解决方案 CSS
table.mytable
width: 40%;
border: 2px solid #000;
table.mytable td
border: 1px solid #000;
【讨论】：
在两个小提琴中，两个表看起来不同（Chrome） 还不错……还是不一样。这是否意味着我无法将 html 属性“翻译”成 CSS，而唯一的方法是手动尝试不同的样式？ 如果您的 jsFiddle 演示过期，您的回答将变得毫无用处。也请直接在您的答案中发布代码。【参考方案2】：我认为您不能完全按照自己喜欢的方式翻译属性...因为当时标准还没有应用到那种程度，而且通常情况在不同的浏览器中看起来会有所不同。最好的方法是尝试将其调整为接近的值。
<!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" >
<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>
【讨论】：
【参考方案3】：当使用带有border 属性的无样式表时，不同浏览器中的边框看起来会有所不同。一些浏览器绘制实心边框，一些为表格绘制外边框，为单元格绘制内嵌边框等。在 CSS 中无法实现这种变化。而且几乎不需要它。在考虑了 CSS 必须提供的各种工具之后，只需选择首选的呈现方式，这些工具大大超出了 HTML 属性的表现能力（创建一些浏览器依赖项除外）。
【讨论】：
以上是关于如何在 CSS 中模仿 <table border="2" cellpadding="5" cellspacing="0" width的主要内容，如果未能解决你的问题，请参考以下文章