HTML table CSS colour only for text, not for border?-CodePudding

I have tried the following, but it makes the border also red. I want to make only text red. Is that possible?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <style>
    .class2,
    .class2 tr,
    .class2 td {
      border: solid 2px;
      border-collapse: collapse;
    }
    
    .class1{
      color: red;
    }
  </style>
</head>

<body>
  <table >
    <tr >
      <td>hello</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello</td>
      <td>world</td>
    </tr>
  </table>
</body>

</html>

CodePudding user response：

You could add a rule into the class to override the border-color:

.class1 td {
  color: red;
  border-color: #000;
}

However, I would normally add the color to the main border declaration like so:

.class2,
.class2 tr,
.class2 td {
  border: solid 2px #000;
  border-collapse: collapse;
}

CodePudding user response：

you need to specify a tag with the color class for the text, like this with the span element and it should only color the text while keeping borders in the original color.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <style>
    .class2,
    .class2 tr,
    .class2 td {
      border: solid 2px;
      border-collapse: collapse;
    }
    
    .class1{
      color: red;
    }
  </style>
</head>

<body>
  <table >
    <tr>
       <td><span >hello</span></td>
       <td><span >world</span></td>
    </tr>
    <tr>
      <td>hello</td>
      <td>world</td>
    </tr>
  </table>
</body>

</html>

CodePudding user response：

Remove td from .class1 td , that td is causing to apply the style on table too , and the color tag works just on text if nothing else is specified

CodePudding user response：

Having read your comments since my original posting, it maybe worth you having a look at media queries, as it seems you can target user themes using them (although this may currently have limited browser support). For me, running dark theme on my machine, I see a yellow border, but in light theme, I see red. (For reference I'm using Google Chrome). This way, you can set a border color for both light and dark themes.

<html>
<head>
  <meta charset="utf-8">
  <style>
    .class2,
    .class2 tr,
    .class2 td {
      border: solid 2px currentcolor;
      border-collapse: collapse;
    }
    
    .class1 td {
      color: red;
      
    }
    
    @media (prefers-color-scheme: dark) {
      .class1 td {
        border-color: #FF0;
      }
    }
  </style>
</head>

<body>
  <table >
    <tr >
      <td>hello</td>
      <td>world</td>
    </tr>
    <tr>
      <td>hello</td>
      <td>world</td>
    </tr>
  </table>
</body>
</html>

CodePudding user response：

You can add the border-color rule to your table to set the border color as black.

    .class2,
    .class2 tr,
    .class2 td {
      border: solid 2px;
      border-collapse: collapse;

      border-color: #000;

    }