如何模仿 在CSS(How to mimic

2019-09-18 11:40发布

站内文章 / 前端开发
47 0 0

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

这里是没有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;
}
​


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属性（除了在创造一些浏览器的依赖关系）的各种工具。



文章来源: How to mimic
in CSS
标签： html css html-table border
举报

收藏的人(0)

登录 后发表评论
0条评论
还没有人评论过~