html - 为什么我的完整表格是粗体的?

标签 html css

你好,

我在 html 中有下表,它完全以粗体显示。我不明白的是我在 train_timetable_table 元素中将属性 font-weight 设置为 normal:

我是否错过了向我的 CSS 配置添加一个新元素,该元素以粗体显示第一行(在我下面的示例中标识为 * I would like this row in bold *)

我希望我的问题足够清楚,并希望能为以后的搜索节省一些时间。

非常感谢您抽出宝贵时间帮助解决此问题。

祝福

 /* 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>
    


       

最佳答案

因为您正在使用 <b>标记你表格中的所有地方,这就是它到处显示粗体的原因。尝试用 <span> 改变它或其他东西。

关于html - 为什么我的完整表格是粗体的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47089156/

相关文章:

html - 表单:您的 CSS 是否适合您的标记,反之亦然?

css - 包含多行的 HTML header

html - 使用 CSS 使表格的顶部和底部边框可见

javascript - Chrome 扩展程序图标未全部显示

html - 除了提交表单之外,在失去焦点时触发 html5 电子邮件验证器

javascript - html 中的外部 javascript 文件不起作用

javascript - 剪切路径圆弧形状

jquery - 如何获取内联样式中指定的字体大小

css - 如何在一个元素上渲染多个阴影?

html - chrome 中的@font-face 未捕获的语法错误