Question

我正在使用Firefox。我有以下代码：

html,
body {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  padding-left: 20px;
  padding-right: 20px;
}


.visitentabelle {
  border: 2px solid black;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.visitentabelle tr {
  height: 50px;
  line-height: 50px;
}

.visitentabelle tr:not(:last-child) {
  border-bottom: 1px solid black;
}

.visitentabelle .rowgroup {
  writing-mode: vertical-rl;
  text-align: center;
  vertical-align: middle;
  transform: rotate(180deg);
  border-right: 1px solid black;
  width: 30px;
  line-height: 30px;
  font-size: 20px;
}

.visitentabelle td {
  text-align: left;
  padding-left: 10px;
}

<html>

  <body id="body">
    <table class="visitentabelle">
      <tr>
        <th rowspan="6" class="rowgroup"><span>SomeHeader</span></th>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
    </table>
  </body>

</html>

JSFiddle可用here

如您所见，我为整个表格定义了边框，但是我的标题行缺少底部边框。我也想在上面加个边框。

我在做什么错了？

谢谢。

Answer 1

您的问题在这里：

.visitentabelle tr:not(:last-child) {
  border-bottom: 1px solid black;
}

基本上，您说的是不与最后一个孩子接壤，这是您tr的最后一个元素。您只需将其更改为：

.visitentabelle tr {
  border-bottom: 1px solid black;
}

检查下面的代码:)希望我能帮忙：）

html,
body {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  padding-left: 20px;
  padding-right: 20px;
}


.visitentabelle {
  border: 2px solid black;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.visitentabelle tr {
  height: 50px;
  line-height: 50px;
}

.visitentabelle tr {
  border-bottom: 1px solid black;
}


.visitentabelle .rowgroup {
  writing-mode: vertical-rl;
  text-align: center;
  vertical-align: middle;
  transform: rotate(180deg);
  border-right: 1px solid black;
  width: 30px;
  line-height: 30px;
  font-size: 20px;
}

.visitentabelle td {
  text-align: left;
  padding-left: 10px;
}

<html>

  <body id="body">
    <table class="visitentabelle">
      <tr>
        <th rowspan="6" class="rowgroup"><span>SomeHeader</span></th>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
      <tr>
        <td colspan="6">test</td>
      </tr>
    </table>
  </body>

</html>

Answer 2

您的垂直标题rowspan错误，应该为5，请在下面进行检查：

.visitentabelle {
    border: 2px solid black;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.visitentabelle tr {
    height: 50px;
    line-height: 50px;
}

.visitentabelle tr:not(:last-child) {
    border-bottom: 1px solid black;
}

.visitentabelle .rowgroup {
    writing-mode: vertical-rl;
    text-align: center;
    vertical-align: middle;
    transform: rotate(180deg);
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    width: 30px;
    line-height: 30px;
    font-size: 20px;
}

.visitentabelle td {
    text-align: left;
    padding-left: 10px;
}

<table class="visitentabelle">
    <tr>
        <th rowspan="5" class="rowgroup"><span>SomeHeader</span></th>
        <td colspan="6">test</td>
    </tr>
    <tr>
        <td colspan="6">test</td>
    </tr>
    <tr>
        <td colspan="6">test</td>
    </tr>
    <tr>
        <td colspan="6">test</td>
    </tr>
    <tr>
        <td colspan="6">test</td>
    </tr>
</table>

也在JSFiddle上。

Answer 3

Try this code:

CSS:

html,
body {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  padding-left: 20px;
  padding-right: 20px;
}


.visitentabelle {
  border: 2px solid black;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.visitentabelle tr {
  height: 50px;
  line-height: 50px;
}

.visitentabelle tr:not(:last-child) {
  border-bottom: 1px solid black;
}

.visitentabelle .rowgroup {
  writing-mode: vertical-rl;
  text-align: center;
  vertical-align: middle;
  transform: rotate(180deg);
  border-right: 1px solid black;
  width: 50px;
  line-height: 30px;
  font-size: 20px;
}

.visitentabelle td {
  text-align: left;
  padding-left: 10px; 
}
        td .rowgroup{border-bottom:1px solid #000;}
        .visitentabelle td:last-child{padding-left:0;}
        .testgroup table tr td{padding-left:10px; border-bottom:1px solid #000;}

HTML: 

<body id="body">
    <table class="visitentabelle" cellpadding="0" cellspacing="0">
     <tr>
        <td class="rowgroup">
            <span>SomeHeader</span>
        </td>
        <td class="testgroup">
            <table width="100%" cellpadding="0" cellspacing="0" class="inner-table">
                <tr>
                    <td> Test</td>
                </tr>
                <tr>
                    <td> Test</td>
                </tr>
                <tr>
                    <td> Test</td>
                </tr>
                <tr>
                    <td> Test</td>
                </tr>
                <tr>
                    <td> Test</td>
                </tr>
            </table>
        </td>
     </tr>
    </table>
  </body>

具有行跨度的表没有边框

3 个答案: