使用纯CSS获取头部行和头部列的边框

时间：2017-03-04 11:15:06

标签： html css

我正在研究一个系统（也许你从片段中猜到了它，它的汇合）并尝试设置表格。

重要 我没有机会修改 table-html 输出，我只能添加一些CSS样式。这些表可以在页面上的每个组合中出现，并由用户添加。

这是结构和可能的表comibnations - 这只是一个例子 - 还有其他组合。

＆＃13;
＆＃13; 
.confluenceTable {
	border-collapse: collapse;
}

.confluenceTh, .confluenceTd {
	padding: 6px 8px;
	border: 1px solid #888a85;
	border-right: none;
	border-bottom: none;
}

table.confluenceTable tr:first-child .confluenceTh, 
table.confluenceTable tr:first-child .confluenceTd {
	border-top: none;
}

.confluenceTh:first-child, .confluenceTd:first-child {
	border-left: none;
}



table.confluenceTable thead tr:first-child .confluenceTh {
  border-bottom: 2px solid #CC0018;
}

table.confluenceTable tr .confluenceTh + :not(.confluenceTh) {
  border-left: 2px solid #CC0018; 
}
＆＃13; 
<h2>First</h2>
<p>table without headers</p>
<table class="confluenceTable">
  <tbody>
    <tr>
      <td class="confluenceTd">1.1</td>
      <td class="confluenceTd">2.1</td>
      <td class="confluenceTd">3.1</td>
    </tr>
    <tr>
      <td class="confluenceTd">1.2</td>
      <td class="confluenceTd">2.2</td>
      <td class="confluenceTd">3.2</td>
    </tr>
    <tr>
      <td class="confluenceTd">1.3</td>
      <td class="confluenceTd">2.3</td>
      <td class="confluenceTd">3.3</td>
    </tr>
  </tbody>
</table>
<h2>Second</h2>
<p>table with column header</p>
<table class="confluenceTable">
  <thead>
    <tr>
      <th class="confluenceTh">1.1</th>
      <th class="confluenceTh">2.1</th>
      <th class="confluenceTh">3.1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="confluenceTd">1.2</td>
      <td class="confluenceTd">2.2</td>
      <td class="confluenceTd">3.2</td>
    </tr>
    <tr>
      <td class="confluenceTd">1.3</td>
      <td class="confluenceTd">2.3</td>
      <td class="confluenceTd">3.3</td>
    </tr>
  </tbody>
</table>
<h2>Third</h2>
<p>table with row header</p>
<table class="confluenceTable">
  <tbody>
    <tr>
      <th class="confluenceTh">1.1</th>
      <td class="confluenceTd">2.1</td>
      <td class="confluenceTd">3.1</td>
    </tr>
    <tr>
      <th class="confluenceTh">1.2</th>
      <td class="confluenceTd">2.2</td>
      <td class="confluenceTd">3.2</td>
    </tr>
    <tr>
      <th class="confluenceTh">1.3</th>
      <td class="confluenceTd">2.3</td>
      <td class="confluenceTd">3.3</td>
    </tr>
  </tbody>
</table>
<h2>Fourth</h2>
<p>table with row and column header</p>
<table class="confluenceTable">
  <thead>
    <tr>
      <!-- This element should also have a border right -->
      <th class="confluenceTh">1.1</th>
      <th class="confluenceTh">2.1</th>
      <th class="confluenceTh">3.1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="confluenceTh">1.2</th>
      <td class="confluenceTd">2.2</td>
      <td class="confluenceTd">3.2</td>
    </tr>
    <tr>
      <th class="confluenceTh">1.3</th>
      <td class="confluenceTd">2.3</td>
      <td class="confluenceTd">3.3</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

问题是第四表 - 我发现无法将border-right添加到1.1，即列和行标题。 有没有人看到纯CSS解决方案？

在未来的步骤中，表格中间可能还有标题......

3 个答案:

答案 0 :(得分：2)

使用下面的nth-of-type伪选择器选择4th table并添加border to right-side th first-child。

  

：nth-​​of-type（an + b）CSS伪类匹配具有的元素   a + b-1兄弟姐妹，在文档中具有相同的元素名称   树，对于n的给定正值或零值，并且具有父节点   元件。

table.confluenceTable:nth-of-type(4) > thead > tr > th:first-child{
  border-right:2px solid #CC0018;
}

＆＃13;
＆＃13; 
.confluenceTable {
	border-collapse: collapse;
}

.confluenceTh, .confluenceTd {
	padding: 6px 8px;
	border: 1px solid #888a85;
	border-right: none;
	border-bottom: none;
}

table.confluenceTable tr:first-child .confluenceTh, 
table.confluenceTable tr:first-child .confluenceTd {
	border-top: none;
}

.confluenceTh:first-child, .confluenceTd:first-child {
	border-left: none;
}



table.confluenceTable thead tr:first-child .confluenceTh {
  border-bottom: 2px solid #CC0018;
}

table.confluenceTable tr .confluenceTh + :not(.confluenceTh) {
  border-left: 2px solid #CC0018; 
}
table.confluenceTable:nth-of-type(4) > thead > tr > th:first-child{
  border-right:2px solid #CC0018; /*Add this*/
}
＆＃13; 
<h2>First</h2>
<p>table without headers</p>
<table class="confluenceTable">
  <tbody>
    <tr>
      <td class="confluenceTd">1.1</td>
      <td class="confluenceTd">2.1</td>
      <td class="confluenceTd">3.1</td>
    </tr>
    <tr>
      <td class="confluenceTd">1.2</td>
      <td class="confluenceTd">2.2</td>
      <td class="confluenceTd">3.2</td>
    </tr>
    <tr>
      <td class="confluenceTd">1.3</td>
      <td class="confluenceTd">2.3</td>
      <td class="confluenceTd">3.3</td>
    </tr>
  </tbody>
</table>
<h2>Second</h2>
<p>table with column header</p>
<table class="confluenceTable">
  <thead>
    <tr>
      <th class="confluenceTh">1.1</th>
      <th class="confluenceTh">2.1</th>
      <th class="confluenceTh">3.1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="confluenceTd">1.2</td>
      <td class="confluenceTd">2.2</td>
      <td class="confluenceTd">3.2</td>
    </tr>
    <tr>
      <td class="confluenceTd">1.3</td>
      <td class="confluenceTd">2.3</td>
      <td class="confluenceTd">3.3</td>
    </tr>
  </tbody>
</table>
<h2>Third</h2>
<p>table with row header</p>
<table class="confluenceTable">
  <tbody>
    <tr>
      <th class="confluenceTh">1.1</th>
      <td class="confluenceTd">2.1</td>
      <td class="confluenceTd">3.1</td>
    </tr>
    <tr>
      <th class="confluenceTh">1.2</th>
      <td class="confluenceTd">2.2</td>
      <td class="confluenceTd">3.2</td>
    </tr>
    <tr>
      <th class="confluenceTh">1.3</th>
      <td class="confluenceTd">2.3</td>
      <td class="confluenceTd">3.3</td>
    </tr>
  </tbody>
</table>
<h2>Fourth</h2>
<p>table with row and column header</p>
<table class="confluenceTable">
  <thead>
    <tr>
      <!-- This element should also have a border right -->
      <th class="confluenceTh">1.1</th>
      <th class="confluenceTh">2.1</th>
      <th class="confluenceTh">3.1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="confluenceTh">1.2</th>
      <td class="confluenceTd">2.2</td>
      <td class="confluenceTd">3.2</td>
    </tr>
    <tr>
      <th class="confluenceTh">1.3</th>
      <td class="confluenceTd">2.3</td>
      <td class="confluenceTd">3.3</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

试试这个）

body > .confluenceTable:nth-child(12) thead tr:first-child th:first-child   {
    border-right: 2px solid #CC0018; 
}

现场演示 - https://jsfiddle.net/grinmax_/wxfL4ocg/

答案 2 :(得分：1)

您的问题，更一般地
您的HTML中包含以下结构。

element.A1
  element.A2
element.B1
  element.B2

现在，您希望根据A2的某些属性设置B2样式。例如，如果存在B2，则B2是特定类型的元素（如div或span），如果它具有某个attribute （[data-foo="bar"]）等等。

使用CSS解决
不幸的是，目前使用纯CSS解决方案无法做到这一点。这是因为CSS中的所有选择器都从一个元素转到该元素的任何后代，但从不相反。例如，a b选择b的所有a元素作为a > b的后代。对于a，只考虑.A1.special .A2 { /* special styling on A2 */ } 类型元素的子元素。 There is however no way to go the other way.

使用JS + CSS解决
现在，您可以通过使用某个类并使用JavaScript应用该类来解决您的问题。类似于以下内容。

var b2s = document.querySelectorAll('.B2'), i;
for (i = 0; i < b2s.length; ++i) {
    if (isSpecial(b2s[i])) {
        b2s[i].parentNode.previousSibling.classList.add('special');
    }
}

isSpecial

参考文献：querySelectorAll，parentNode，previousSibling，classList。

// detect special case and add class for CSS styling var firstRows = document.querySelectorAll('.confluenceTable tbody > tr:first-child'), i; for (i = 0; i < firstRows.length; ++i) { if (firstRows[i].querySelector('th') !== null) { firstRows[i].parentNode.parentNode.classList.add('special'); } }函数将检查您要检查的任何属性。特别是，我在以下代码段中实现了您的具体问题。

.confluenceTable {
	border-collapse: collapse;
}

.confluenceTh, .confluenceTd {
	padding: 6px 8px;
	border: 1px solid #888a85;
	border-right: none;
	border-bottom: none;
}

table.confluenceTable tr:first-child .confluenceTh, 
table.confluenceTable tr:first-child .confluenceTd {
	border-top: none;
}

.confluenceTh:first-child, .confluenceTd:first-child {
	border-left: none;
}

table.confluenceTable thead tr:first-child .confluenceTh {
  border-bottom: 2px solid #CC0018;
}

table.confluenceTable tr .confluenceTh + :not(.confluenceTh) {
  border-left: 2px solid #CC0018; 
}

/* add styling for the exceptional case */
table.confluenceTable.special > thead > tr > th:first-child{
  border-right:2px solid #CC0018;
}
<h2>First</h2>
<p>table without headers</p>
<table class="confluenceTable">
  <tbody>
    <tr>
      <td class="confluenceTd">1.1</td>
      <td class="confluenceTd">2.1</td>
      <td class="confluenceTd">3.1</td>
    </tr>
    <tr>
      <td class="confluenceTd">1.2</td>
      <td class="confluenceTd">2.2</td>
      <td class="confluenceTd">3.2</td>
    </tr>
    <tr>
      <td class="confluenceTd">1.3</td>
      <td class="confluenceTd">2.3</td>
      <td class="confluenceTd">3.3</td>
    </tr>
  </tbody>
</table>
<h2>Second</h2>
<p>table with column header</p>
<table class="confluenceTable">
  <thead>
    <tr>
      <th class="confluenceTh">1.1</th>
      <th class="confluenceTh">2.1</th>
      <th class="confluenceTh">3.1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="confluenceTd">1.2</td>
      <td class="confluenceTd">2.2</td>
      <td class="confluenceTd">3.2</td>
    </tr>
    <tr>
      <td class="confluenceTd">1.3</td>
      <td class="confluenceTd">2.3</td>
      <td class="confluenceTd">3.3</td>
    </tr>
  </tbody>
</table>
<h2>Third</h2>
<p>table with row header</p>
<table class="confluenceTable">
  <tbody>
    <tr>
      <th class="confluenceTh">1.1</th>
      <td class="confluenceTd">2.1</td>
      <td class="confluenceTd">3.1</td>
    </tr>
    <tr>
      <th class="confluenceTh">1.2</th>
      <td class="confluenceTd">2.2</td>
      <td class="confluenceTd">3.2</td>
    </tr>
    <tr>
      <th class="confluenceTh">1.3</th>
      <td class="confluenceTd">2.3</td>
      <td class="confluenceTd">3.3</td>
    </tr>
  </tbody>
</table>
<h2>Fourth</h2>
<p>table with row and column header</p>
<table class="confluenceTable">
  <thead>
    <tr>
      <!-- This element should also have a border right -->
      <th class="confluenceTh">1.1</th>
      <th class="confluenceTh">2.1</th>
      <th class="confluenceTh">3.1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="confluenceTh">1.2</th>
      <td class="confluenceTd">2.2</td>
      <td class="confluenceTd">3.2</td>
    </tr>
    <tr>
      <th class="confluenceTh">1.3</th>
      <td class="confluenceTd">2.3</td>
      <td class="confluenceTd">3.3</td>
    </tr>
  </tbody>
</table>
{
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 25,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021-3100"
  }
}

相关问题
最新问题