表格单元格周围的边框 - CSS答案

【问题标题】：Borders around table cells - CSS表格单元格周围的边框 - CSS
【发布时间】：2017-04-15 06:00:33
【问题描述】：

使用下表我有一些问题。首先，html有什么问题？我收到错误标记。但主要问题是，leftcolumn 没有得到完整的边框，我不知道为什么。

<!DOCTYPE html>
<html>

  <head>
    <title> Auflistung 2014</title>
    <style type="text/css">
      * html body {
        margin: 0;
        padding: 0;
        border: 0;
      }

      body {
        margin: 0;
        padding: 0;
        border: 0;
      }

      body {
        font-family: "Lucida Console", sans-serif;
        font-size: 66%;
      }

      table {
        border-spacing: 0;
        border-collapse: collapse;
        border: 0;
        width: 650px;
      }

      td {
        white-space: nowrap;
        text-align: right;
        border-collapse: collapse;
        border: 1px solid #000;
      }

      th {
        font-family: Helvetica;
        font-size: 120%;
      }

      body {
        margin: 10px;
      }

      .linkespalte {
        text-align: center;
        width: 80px;
        font-size: 100%;
        border-collapse: collapse;
        border: 1px solid #000;
      }

      .lfd {
        width: 3em;
      }

      .bet {
        width: 6em;
      }

      .vorst {
        width: 6em;
      }

      .date {
        width: 6em;
      }

      .mwst {
        width: 4em;
      }

    </style>
  </head>

  <body>
    <br/>
    <br/>
    <table>
      <tr>
        <th colspan="7"> Ueberschrift I </th>
      </tr>
      <tr>
        <td colspan="3">Summe Netto: 0.00</td>
        <td colspan="4">Summe Vorsteuer 7%: 0.00 Summe Vorsteuer 19%: 0.00</td>
      </tr>
    </table>
    <br/>
    <br/>
    <table>
      <tr>
        <th colspan="7">Ueberschrift II</th>
      </tr>
      <tr>
        <td class="linkespalte" rowspan="250"><em>480</em></td>
        <td class="lfd"> 1</td>
        <td class="date"> 18.12.</td>
        <td width="120">Fa XY</td>
        <td width="120">iPad AIR 16GB</td>
        <td width="10" class="bet"> 369.00</td>
        <td class="mwst"> 19</td>
        <td class="vorst"> 58.92</td>
      </tr>
      <tr>
        <td colspan="3">Summe Netto: 310.08</td>
        <td colspan="4">Summe Vorsteuer 7%: 0.00 Summe Vorsteuer 19%: 58.92</td>
      </tr>
    </table>
  </body>

</html>

【问题讨论】：

“我收到错误标记。” - 那可能是什么？
被验证器标记（如缺少字符集）？
看起来你的左栏对我来说有边框 - jsfiddle.net/0ncer9dd
是的，左栏 (class="linkespalte") 也有边框。是不是因为每个单元格都有一个边框，所以两个边框自己异或？
在 Firefox 中查看源代码并打开 W3C 验证时，我遇到了几个错误：line 34 column 20 - Fehler: Table columns in range 2…3 established by element “th” have no cells beginning in them. line 34 column 20 - Fehler: Table columns in range 5…7 established by element “th” have no cells beginning in them. line 39 column 43 - Fehler: Table cell spans past the end of its row group established by a “tbody” element; clipped to the end of the row group.

标签： html css html-table

【解决方案1】：

您的代码如下：

<td class="linkespalte" rowspan="250" ><em>480</em></td>

但是，应该是这样的：

<td class="linkespalte" rowspan="2" ><em>480</em></td>

【讨论】：

问题是我正在从一种报告生成器动态生成表格，该报告生成器无法（轻松）事先知道行数，我只取了一个很大的数字（250），我确信跨越左列旁边的行数没有超过它。（可能是一种肮脏的方法 - 是否有某种“*”选项？）
将行跨度计数设置为正确（为 2）也使“缺少底部边框”问题消失了。但是，不指定要跨越的正确行数的解决方案会更受欢迎。