为什么我的整个表格以粗体显示？

时间：2017-11-03 05:40:26

标签： html css

美好的一天，

我在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 &nbsp; 05:51&#9830;</b></td>
                    <td class="tablerows"><b>06:06 &nbsp; 06:21&#9830; &nbsp; 06:36 &nbsp; 06:51&#9830;</b></td>
                    <td class="tablerows"><b>07:06 &nbsp; 07:21&#9830; &nbsp; 07:36 &nbsp; 07:51&#9830;</b></td>
                    <td class="tablerows"><b>08:06 &nbsp; 08:21&#9830; &nbsp; 08:36 &nbsp; 08:51&#9830;</b></td>
                  </tr>
                  <tr>
                    <td class="tablerows"><b>09:06 &nbsp; 09:21&#9830; &nbsp; 09:36 &nbsp; 09:51&#9830;</b></td>
                    <td class="tablerows"><b>10:06 &nbsp; 10:21&#9830; &nbsp; 10:36 &nbsp; 10:51&#9830;</b></td>
                    <td class="tablerows"><b>11:06 &nbsp; 11:21&#9830; &nbsp; 11:36 &nbsp; 11:51&#9830;</b></td>
                    <td class="tablerows"><b>12:06 &nbsp; 12:21&#9830; &nbsp; 12:36 &nbsp; 12:51&#9830;</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>

3 个答案:

答案 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; 标记。

相关问题
最新问题