如何模仿< table border =&"2&"cellpadding =&"5"cellspacing =&"0"width =& quot; 40％"& gt;在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中的第一步，我尝试尝试将后一种表格样式定义为CSS .

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

我无法实现它-无论做什么，边框看起来都不同.请帮忙.

我的CSS样式HTML:

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 =& quot; 40％"& gt;在CSS中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！