I have a table in which I want to put a text in white and another in blue, within the same th.
Thinking and trying things, none worked as I wanted. this is my code
body {
color: #FF0000;
font: 14px Sans-Serif;
padding: 50px;
background: #eee;
}
#container {
box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5);
position: relative;
background: white;
}
table {
background-color: #FFFFFF;
border-collapse: collapse;
width: 100%;
margin: 15px 0;
}
th {
background-color: #FF0000 ;
color: #FFF;
cursor: pointer;
padding: 5px 10px;
}
th small {
font-size: 9px;
color: black;
}
td, th {
text-align: left;
}
a {
text-decoration: none;
color: black;
}
/*
Cambia color de letra
*/
td a {
color: black;
display: block;
padding: 10px 10px;
font-size: 16px;
}
th a {
padding-left: 0;
color: #FFE800;
}
td:first-of-type a {
background: url(./.images/file.png) no-repeat 10px 50%;
padding-left: 35px;
}
th:first-of-type {
padding-left: 35px;
}
td:not(:first-of-type) a {
background-image: none !important;
}
tr:nth-of-type(odd) {
background-color: #FFFFFF;
}
tr:hover td {
background-color:#DF2727;
}
tr:hover td a {
color: #FFF;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>582100450 (CB_ASFAD_U)</title>
<link rel="stylesheet" href="./.style.css">
<script src="./.sorttable.js"></script>
</head>
<body>
<div id="container">
<table class="sortable">
<thead>
<tr>
<th>Nombre Fichero <br> (Filename) </th>
<th>Tipo <br> (Type) </th>
<th>Tamaño <br> (Size) </th>
<th>Fecha de modificación <br> (Modification date) </th>
</tr>
</thead>
</table>
</div>
</body>
</html>
I tried a <p>
, but it didn't work out very well. I don't know if it's possible to do this, but my plan is for the Spanish text to come out in white (as it is) and the English text in blue, leaving the same font style, position and all that it currently has.
This kind of thing is what the tag was intended for
<span>
. Not being a block element, it doesn't affect the rest of the content, so it can be used to give a different size, color, thickness... to part of an element.