shl*_*ter 11 css row html-table border margin
我是CSS的新手,我正在开发一个intraweb应用程序,它将在现代标准浏览器中呈现(IE支持不是必需的).我花了很多时间在这个网站和其他网站上寻找答案,但却找到答案"这是不可能的,因为......"或"做这个黑客而不是......"但我不会接受.
这就是我需要的:
直到我打造桌子才能看到(2)border-collapse: collapse;.精细.但是(3)显然只适用于border-spacing,而且只适用于无论如何被禁用的<td>元素(不是<tbody>或者<tr>)collapse.同时,对于一些不可知的原因,margin的不认可<thead>,<tr>或<th>元素,但其padding-top身体的第一行上<td>的作品,但它没有,因为当我鼠标移到第一行,整个与容限哪些也被强制执行padding,这让我感到恶心.
我知道在桌子的标题和身体之间有几个像素的边距就像一个真正偏离左边的领域,为什么,任何人都想要的东西,但我应该告诉你什么？我没有便宜的约会.
如果您还要 1)说明如何在不改变标记的情况下执行此操作(从而保持表示与内容的分离,CSS显然是为了鼓励),请尽可能地表现出我对理解CSS的愚蠢和残忍而且居高临下.2)同意我认为CSS很奇怪.
<head><style>
table {
border-collapse: collapse;
border-spacing: 0;
}
thead {
border-bottom: 4px solid #123456;
}
/*** something goes here ***/
tbody tr:hover {
background-color: #ABCDEF;
}
</style></head>
<body>
<table>
<thead>
<tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
</thead>
<tbody>
<tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
<tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
<tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
</tbody>
</table>
</body>
好的，按顺序：
1：具有一个标题行和多个正文行的表格：
这就是元素thead和 的tbody设计目的：
<table>
<thead>
<tr><th>heading one</th><th>Heading two</th></tr>
</thead>
<tbody>
<!--
all body table rows in here
-->
</tbody>
</table>
还有tfoot（请参阅参考资料），如果使用的话，必须在元素之前tbody声明。
2：标题行下方的实线边框：
thead tr th {
border-bottom: 2px solid #000;
}
选择元素th内的元素thead，tr选择器在这里可能是不必要的，虽然它没有坏处，但可以简化为：thead th {/*...*/}。
3：仅在标题行和第一个正文行之间的垂直空白（填充？边距？间距？）。padding看来，不能应用于thead,tbody或tr元素，因为它们本质上（我认为）是“非可视的”，所以它必须在元素上定义td。:hover在悬停时，这确实意味着在（参见下一部分）期间第一行占据了一个令人不安的大“行” 。
tbody tr:first-child td {
padding-top: 1em;
}
4：鼠标悬停时突出显示正文行。
tbody tr:hover td {
background-color: #ffa;
}
虽然您可以将 a 应用于:hover当前悬停的单元格以及后来的同级单元格（使用通用同级~组合器），但您无法将样式应用于之前出现的同级单元格，因此这里我们td根据:hover其父级的来设置元素的样式tr。
td我们必须设置样式（而不是直接更改元素background-color）的原因tr是因为td元素通常不会默认为透明背景，这意味着更改/突出显示的元素background-color被元素“隐藏background-color” td。
参考：