How to specify the bottom border of a ?

前端 未结 5 1771
陌清茗
陌清茗 2020-12-17 09:58

I tried :

.bb {
    border-bottom:1px;
}


But no effect at all.

相关标签:
5条回答
  • 2020-12-17 10:08

    You should define the style on the td element like so:

    <html>
    <head>
        <style type="text/css">
            .bb
            {
                border-bottom: solid 1px black;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    Test 1
                </td>
            </tr>
            <tr>
                <td class="bb">
                    Test 2
                </td>
            </tr>
        </table>
    </body>
    </html>
    
    0 讨论(0)
  • 2020-12-17 10:10

    Try the following instead:

    <html>
     <head>
      <title>Table row styling</title>
      <style type="text/css">
        .bb td, .bb th {
         border-bottom: 1px solid black !important;
        }
      </style>
     </head>
     <body>
      <table>
        <tr class="bb">
          <td>This</td>
          <td>should</td>
          <td>work</td>
        </tr>
      </table>
     </body>
    </html>
    
    0 讨论(0)
  • 2020-12-17 10:12

    What I want to say here is like some kind of add-on on @Suciu Lucian's answer.

    The weird situation I ran into is that when I apply the solution of @Suciu Lucian in my file, it works in Chrome but not in Safari (and did not try in Firefox). After I studied the guide of styling table border published by w3.org, I found something alternative:

    table.myTable{
      border-spacing: 0;
    }
    
    table.myTable td{
      border-bottom:1px solid red;
    }
    

    Yes you have to style the td instead of the tr.

    0 讨论(0)
  • 2020-12-17 10:14
    tr td 
    {
        border-bottom: 2px solid silver;
    }
    

    or if you want the border inside the TR tag, you can do this:

    tr td {
        box-shadow: inset 0px -2px 0px silver;
    }
    
    0 讨论(0)
  • 2020-12-17 10:15

    Add border-collapse:collapse to the table.

    Example:

    table.myTable{
      border-collapse:collapse;
    }
    
    table.myTable tr{
      border:1px solid red;
    }
    

    This worked for me.

    0 讨论(0)
提交回复
热议问题