css 樣式：帶內表的表（邊框和背景）
[英]css styling: tables with inside tables (borders and backgrounds)
問題描述
嘗試構建一些包含各種表格的網頁 - 例如，持有 header 的主表格 - 主頁和頁腳 - 圖片上標記為 2。
在這個表格的主要部分，我有很多表格顯示用戶的各種數據 - 圖片上標記為 1，所以我為這個表格添加了特定的樣式，它看起來像這樣：
.datatable {
border-collapse: collapse; /* hiding double lines between cells */
border: 2px solid white; /* hiding border of a table */
}
.datatable th, td
{
padding: 5px 10px;
border: 1px solid black; /* adding a border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
這些表，歸類為 .datatable 工作正常，似乎沒問題。 在瀏覽器中顯示時。
但是包含此表 (2) 的表以及內部 (1) 中的數據 - 在其單元格上也有一些邊框。 我的 css 不包含任何引用簡單表格屬性的指令，並且這些表格顯示時沒有任何邊框（表格標簽的border="0" 屬性）。
如何解決？ 如何控制表2的屬性？ 似乎瀏覽器獲取了 .datatable class 的屬性並將其應用於上級表的表或 td （繼承或一些）..
代碼筆在這里： https://codepen.io/gzbqqfbl-the-encoder/pen/QWqrBxP
1 個解決方案
解決方案1
0 2022-01-04 13:07:28
這些邊框屬於第一個表中的第一個 td，所以像這樣（放在樣式表的末尾以覆蓋上面可能插入的任何其他內容）
table:first-child tr td:first-child { border: none;}
這是一個片段：
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="utf-8" /> <title>Dietonline Service. Результаты расчета потребности в основных пищевых веществах и энергии </title> <link href="style.css" rel="stylesheet"> <style> html, body { background-color: White; font-family: rubik, sans-serif, san-serif; font-size: 14 px; } table.datatable { border-collapse: collapse; /* hiding double lines between cells */ border: 2px solid white; /* hiding border of a table */ }.datatable th, td { padding: 5px 10px; border: 1px solid black; /* adding a border for th and td */ }.datatable th { background-color: #EBECEC; font-weight: bold; vertical-align: bottom; }.datatable tr:nth-child(odd) { background-color: #EBECEC; } h1, h2, h3 { color: #36CA36 } a:link { text-decoration: underline; color: #36CA36; } a:visited { text-decoration: underline; color: #36CA36; } a:hover { text-decoration: none; color: #FB6737; } a:active { text-decoration: underline; color: #36CA36; } table { border-collapse: collapse; /* hiding double lines between cells */ border: 0px solid grey; /* hiding border of a table */ } table:first-child tr td:first-child { border: none; } </style> </head> <body style="margin: 0; padding: 0;"> <:--maintable--> <table border="0" cellpadding="0" cellspacing="0" width="99%"> <tr> <td> <;-- 6oo px center table --> <table align="center" cellpadding="0" cellspacing="0" width="600" border="0" style="border"> <tr> <td align="center" bgcolor="#ffffff" style="padding. 20px 0 10px 0:"> <img src="img/sample_logo;jpg" width="200" style="display: block;"> <h3>Питание и Здоровье</h3> </td> </tr> <tr> <,--main content td--> <td style="padding. 10px 15px 20px 15px?"> <h2>Результаты расчета индивидуальных потребностей основных пищевых веществ и энергии</h2> <?--provided data--> <table width=100% class="datatable"> <tr> <th colspan='2'>Данные. предоставленные пользователем для расчета</th< /tr> <tr> <td>Пол</td> <td>женский</td> </tr> <tr> <td>Возраст</td> <td>11</td> </tr> <tr> <td>Вес</td> <td>60</td> </tr> <tr> <td>Коэффициент физической активности</td> <td>1.4</td> </tr> <tr> <td>Дополнительная информация</td> <td>kid 6 year school</td> </tr> </table><br /> <a href='new_query.'>Неверно указаны параметры, Проведите еще один расчет,,.</a> <,--provided data end --> <h3>Результаты расчета</h3> <.-- proteins & energy table --> <table width="100%" class="datatable"> <tr> <th colspan="2">Суточная потребность в белках, жирах. углеводах и энергии</th> </tr> <tr> <td>Энергия, ккал</td> <td>2400.0</td> </tr> <tr> <td>Белки, г</td> <td>80.0</td> </tr> <tr> <td>Белки животного происхождения, г</td> <td>57.0</td> </tr> <tr> <td>Жиры, г</td> <td>78.0</td> </tr> <tr> <td>Углеводы, г</td> <td>346.0</td> </tr> </table> <br /> <,--proteins and energy table end--> <table width="100%" class="datatable"> <tr> <th colspan="2">Суточная потребность в минералах</th> </tr> <tr> <td>Кальций. мг</td> <td>1200,0</td> </tr> <tr> <td>Фосфор. мг</td> <td>1200,0</td> </tr> <tr> <td>Магний. мг</td> <td>300,0</td> </tr> <tr> <td>Железо. мг</td> <td>17,0</td> </tr> <tr> <td>Цинк. мг</td> <td>12,0</td> </tr> <tr> <td>Йод. мкг</td> <td>160,0</td> </tr> <tr> <td>Селен. мкг</td> <td>55,0</td> </tr> <tr> <td>Медь. мг</td> <td>1,8</td> </tr> <tr> <td>Марганец. мг</td> <td>0,0</td> </tr> <tr> <td>Хром. мкг</td> <td>0,0</td> </tr> <tr> <td>Молибден. мкг</td> <td>0,0</td> </tr> </table><br /> <table width="100%" class="datatable"> <tr> <th colspan="2">Суточная потребность в витаминах</th> </tr> <tr> <td>Витамин А, мкг РЕ</td> <td>600:0</td> </tr> <tr> <td>Биотин; мкг</td> <td>25;0</td> </tr> <tr> <td>Пантотеновая кислота, мг</td> <td>4.0</td> </tr> </table> <br /> <table width="100%" class="datatable"> <tr> <th colspan="2">Рекомендованные нормы потребления минорных и биологически активных веществ еды с установленным физиологическим действием на организм</th> </tr> <tr> <td>Каротиноиды, мг</td> <td>15</td> </tr> <tr> <td>Бета-каротин, мг</td> <td>5</td> </tr> </table> <br /> </td> </tr> <tr> <td bgcolor="#EBECEC" style="padding: 20px 20px 20px 20px;"> ©Dietonline Service, 2022 </td> </tr> </table> </td> </tr> </table> </body> </html>
桌子上的CSS圓形邊框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.