Question

我有一个简单的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>

Answer 1

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>

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

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

Answer 3

使用带有border属性的无样式表格时，不同浏览器中的边框会有所不同。有些浏览器会绘制实体边框，有些浏览器会为表格绘制初始边框，并为单元格插入边框等等。无法在CSS中实现此变化。几乎没有任何需要它。在考虑了CSS必须提供的各种工具并且大大超出了表示HTML属性的功能（创建一些浏览器依赖项除外）之后，只需选择首选渲染。

如何在CSS中模仿<table border =“2”cellpadding =“5”cellspacing =“0”width =“40％”> </table>

3 个答案: