美好的一天,
我在html中有下表,它完全以粗体显示。我不明白的是我在train_timetable_table元素中将属性font-weight设置为normal:
我是否错过了为我的CSS配置添加新元素,仅以粗体显示第一行(在下面的示例中标识为*我希望此行以粗体显示*)
我希望我的问题足够明确,希望能为将来的搜索节省一些时间。
非常感谢您的时间和帮助解决这个问题。
祝福
/* Page entière (utilisé pour avoir une couverture globale en couleur) */
body {
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
}
/* Affichage de l'en-tête */
#header {
font-family:Arial;
text-align:center;
position: relative;
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
color:black;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width:1000px;
height:80px;
}
/* Affichage de la barre de navigation */
#nav {
font-family:Arial;
position: relative;
line-height:50px;
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
height:434px;
width:60px;
float:left;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* Affichage des données essentielles (section) */
#section {
font-family:Arial;
font-size: 100%;
float:left;
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
height:434px;
width:870px;
}
/* Affichage de la barre de pied d'écran (version de domooaweb) */
#footer {
font-family:Arial;
font-size: 60%;
text-align:center;
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
color:black;
clear:both;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height:12px;
width:1000px;
}
#validity {
font-family:Arial;
font-size: 100%;
color:black;
position:fixed;
top: 110px;
left: 640px;
width:350px;
}
#reserved {
position:fixed;
top: 250px;
left: 200px;
color:black;
font-family:Arial, sans-serif;
font-size:18px;
}
#home_automation_tab
{
position: fixed;
height: 350px;
width: 900px;
top: 140px;
left: 140px;
}
#train_station img {
position: fixed;
top: 160px;
left: 140px;
z-index: 2;
}
#weather_img img {
position: fixed;
top: 160px;
left: 140px;
z-index: 2;
}
#emergency_img img {
position: fixed;
top: 160px;
left: 140px;
z-index: 2;
}
/* Affichage du logo */
#logo img {
position: fixed;
top: 12px;
left: 5px;
z-index: 2;
}
/* Affichage de l'icône météo */
#meteo_icon img{
position: fixed;
top: 12px;
left: 935px;
z-index: 2;
}
/* Affichage des prévisions météorologiques (températures) */
.meteoforecast_temperature{
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
font-weight: 900;
color: black;
}
/* Affichage des prévisions météorologiques (jour) */
.meteoforecast_day{
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: black;
}
/* Affichage des prévisions météorologiques (condition) */
.meteoforecast_condition {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: black;
}
/* Affichage de la météo dans le monde (scroller) */
#worldwide_meteo {
font-family:Arial;
font-size: 18px;
color:black;
top: 150px;
left: 145px;
width: 800px;
position: fixed;
}
/* Affichage de l'image d'erreur 404 (page non trouvée) */
#err404 img{
position: fixed;
top: 180px;
left: 180px;
}
/* Affichage de l'image de la météo mondiale */
#ww_meteo img{
position: fixed;
top: 200px;
left: 165px;
}
/* Affichage des icônes météo mondiale */
Marquee img {
vertical-align:middle
}
/* Table pour horaires de train (lundi-samedi) */
#table_train_timetable1
{
position: fixed;
top: 290px;
left: 139px;
z-index: 2;
}
/* Table pour prévisions météo 3 jours */
#table_forecast_3days
{
position: fixed;
top: 290px;
left: 139px;
z-index: 2;
}
.train_timetable_table
{
border: 1px solid black;
color: black;
border-color:gray;
font-weight:normal;
}
.train_timetable_table td
{
font-family:Arial, sans-serif;
font-size:14px;
padding:5px 5px 5px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:gray;
font-weight:normal;
}
.train_timetable_table th
{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:5px 5px 5px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:gray;
}
.train_timetable_table .title
{
font-weight:bold;
color:black;
border-color:gray;
}
.train_timetable_table .tablerows
{
vertical-align:top;
font-weight:normal;
}
.weather_forecast_table
{
border: 1px solid black;
}
.useful_numbers_table
{
border: 1px solid black;
color:black;
border-color:gray;
}
.temps_parcours_table
{
border: 1px solid black;
color: black;
border-color:gray;
}
.temps_parcours_table td
{
font-family:Arial, sans-serif;
font-size:14px;
padding:5px 5px 5px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:gray;
}
.temps_parcours_table th
{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:5px 5px 5px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:gray;
}
.temps_parcours_table .title
{
font-weight:bold;
color:black;
border-color:gray;
}
h2
{
position: fixed;
top: 100px;
left: 140px;
color:black;
}
progress[value] {
/* Reset the default appearance */
-moz-appearance: none;
appearance: none;
/* leave defaults in for other browsers */
background-size: 35px 20px, 100% 100%, 100% 100%;
color:purple;
}
progress::-webkit-progress-bar {
/* ici les styles généraux pour Webkit */
background-color: purple;
}
progress[value]::-webkit-progress-value {
background-color: purple;
}
<!DOCTYPE html>
<html>
<head>
<title>Domuob | home</title>
<meta http-equiv="refresh" content="360">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="css/mystyle_day.css" />
</head>
<body>
<div id="header">
<h1></h1>
<div id="section">
<h2>Horaires de train</h2>
<div id="train_station">
<img src="assets/pictures/zoo.png" alt="" style="width:850px;height:97px;">
</div>
<div id="table_train_timetable1">
<table class="train_timetable_table" style="width:840px">
<colgroup>
<col style="width: 210px">
<col style="width: 210px">
<col style="width: 210px">
<col style="width: 210px">
</colgroup>
<tr>
<th class="title" colspan="4"><img src="assets/icons/logo_s.png" alt ="" style="width:15px;height:15px;">** I would like this row in bold **</th>
</tr>
<tr>
<td class="tablerows"><b>05:36 05:51♦</b></td>
<td class="tablerows"><b>06:06 06:21♦ 06:36 06:51♦</b></td>
<td class="tablerows"><b>07:06 07:21♦ 07:36 07:51♦</b></td>
<td class="tablerows"><b>08:06 08:21♦ 08:36 08:51♦</b></td>
</tr>
<tr>
<td class="tablerows"><b>09:06 09:21♦ 09:36 09:51♦</b></td>
<td class="tablerows"><b>10:06 10:21♦ 10:36 10:51♦</b></td>
<td class="tablerows"><b>11:06 11:21♦ 11:36 11:51♦</b></td>
<td class="tablerows"><b>12:06 12:21♦ 12:36 12:51♦</b></td>
</tr>
</table>
</div>
<div id="validity">
<p align="right">Horaires valables du 11.12.2016 au 09.12.2017</p>
</div>
</div>
<div id="footer"> Duobweb version 0.0.7 </div>
</body>
</html>
答案 0 :(得分:2)
因为您在表格中的任何位置使用<b>
标记,这就是为什么它在任何地方都显示为粗体的原因。尝试使用<span>
或其他内容进行更改。
答案 1 :(得分:1)
因为默认情况下b
标记有font-weight: bold
属性。
如果要删除影响font-weight
:
.train_timetable_table .tablerows b {
font-weight: normal;
}
答案 2 :(得分:1)
由于您已在每个单元格的内容周围添加了 <b>
粗体标记,因此它会覆盖您在CSS文件中设置的CSS属性:
.train_timetable_table
{
border: 1px solid black;
color: black;
border-color:gray;
font-weight:normal;
}
删除每个单元格值周围的 &lt; b&gt; 标记。