如何模仿< table border =" 2" cellpadding =“5” cellspacing =“0” width =“40％”>在CSS [英] How to mimic <table border="2" cellpadding="5" cellspacing="0" width="40%"> in CSS

问题描述

我有一个简单的html表格元素。

I have a simple html table element.

<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中做我的第一步，我试着 style as CSS 。

Now doing my first steps in CSS, I'm try trying to define the latter table style as CSS .

我无法实现它 - 边框看起来不同。
请帮助。

我的HTML CSS样式：

My HTML with CSS style :

<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>

推荐答案

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

---

Here is the solution without 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

---

Here is the solution with reset.css CSS

table.mytable {
 width: 40%;
 border: 2px solid #000;    
}

table.mytable td{
  border: 1px solid #000;
}
​

这篇关于如何模仿< table border =" 2" cellpadding =“5” cellspacing =“0” width =“40％”>在CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！