locked
Table border color RRS feed

  • Question

  • User363578564 posted

    I wish to have a table with standard 1px black border and light grey color of inside lines

    but I cannot see black color border at the following style

    when change to "2px solid black", it shows black color but too thick at IE11

    any idea?  thanks.

    ***************************************************

    <style type="text/css">

            table.lines {

                border: 1px solid black;

    border-collapse: collapse        }

             table.lines td {

                border: 1pt solid grey;      }

        </style>

    </head><body>

    <table class="lines">

    <tr><td>1</td><td>ABC</td></tr>

    <tr><td>2</td><td>XYZ</td></tr>

     </table></body></html>

    Thursday, November 3, 2016 1:37 PM

Answers

  • User-474980206 posted

    your issue is when collapsed, the cell border is the table border. you need to set the border of the outer cells to the proper color. here is a sample of yellow border and red inner.

            table.lines {
                border-collapse: collapse
             }
             table.lines td {
                border: 1pt solid red;
             }
             table.lines tr:first-of-type td {
                border-top: 1pt solid yellow;
             }
             table.lines tr:last-of-type td {
                border-bottom: 1pt solid yellow;
             }
             table.lines tr td:first-of-type {
                border-left: 1pt solid yellow;
             }
             table.lines tr td:last-of-type {
                border-right: 1pt solid yellow;
             }
    


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 3, 2016 3:15 PM

All replies

  • User-474980206 posted

    your issue is when collapsed, the cell border is the table border. you need to set the border of the outer cells to the proper color. here is a sample of yellow border and red inner.

            table.lines {
                border-collapse: collapse
             }
             table.lines td {
                border: 1pt solid red;
             }
             table.lines tr:first-of-type td {
                border-top: 1pt solid yellow;
             }
             table.lines tr:last-of-type td {
                border-bottom: 1pt solid yellow;
             }
             table.lines tr td:first-of-type {
                border-left: 1pt solid yellow;
             }
             table.lines tr td:last-of-type {
                border-right: 1pt solid yellow;
             }
    


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 3, 2016 3:15 PM
  • User347430248 posted

    Hi TW88,

    you can see the example mentioned below. in which you can set the border color, border light color and border dark color.

    <html>
    <body>
    <form name="myform">
    
    
           <table border="1" bordercolor="#8080cc" bordercolorlight="#8080c0" bordercolordark="#400080" bgcolor="#ffffcc">
        <tr><td>Cell content...</td><td>Cell content...</td></tr>
        <tr><td>Cell content...</td><td>Cell content...</td></tr>
        <tr><td>Cell content...</td><td>Cell content...</td></tr>
     </table> 
    
    </form>
    </body>
    </html>

    Regards

    Deepak

    Friday, November 4, 2016 1:29 AM
  • User363578564 posted

    Thanks a lot.

    Friday, November 4, 2016 1:41 AM
  • User363578564 posted

    I find another issue

    if dropbox in 2nd row cell and textbox in 3rd row cell,

    2nd row cell will have bottom line too because of different type.

    Any ideas?  Thanks.

    Friday, November 4, 2016 6:52 AM
  • User347430248 posted

    Hi TW88,

    you are doing something like in the picture mentioned below.

    what exact output do you want?

    Regards

    Deepak

    Friday, November 4, 2016 7:13 AM
  • User363578564 posted

    Thanks a lot

    I fixed it with last-child.

    it is OK, I am not very familiar with CSS.

    Friday, November 4, 2016 7:34 AM