使 1 张桌子看起来像 2 张桌子放在一起答案

【问题标题】：Make 1 table look like 2 on top of each other使 1 张桌子看起来像 2 张桌子放在一起
【发布时间】：2020-06-10 09:03:43
【问题描述】：

我想让 1 张桌子看起来像 2 张桌子，它们彼此叠放，它们之间有一点空间。每个表的列数相同，但它们包含的文本可能不同。每个表可以包含很多行。我需要这个，因为我需要两个表的列总是相同的宽度。我如何实现这一目标？我需要隐藏空行的侧边框

<table>
  <tr> <!-- First table rows --> </tr>
    <td>text</td>
    <td>text</td>

  <tr> <!-- Empty space between tables --> </tr>

  <tr> <!-- Second table rows --> </tr>
    <td>text</td>
    <td>text</td>

【问题讨论】：

请分享一些你所做的代码？或分享您正在努力实现的目标。
我确实添加了一张图片

标签： html css

【解决方案1】：

只需使用具有特定高度的单个 <td> 元素作为分隔符，并使用 border-collapse 来模拟您要查找的内容：

table {
  border-collapse: collapse;
}

table td {
  border: 1px solid #000;
}

table td.separator {
  border: none;
  height: 40px;
}

<table>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td colspan="2" class="separator"></td>
  </tr>

  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

您可以为此使用 css。 边框间距

改变 45px 大小

table { 
    border-collapse: collapse; 
} 
th { 
    background-color: red; 
    Color:white; 
} 
th, td { 
    width:150px; 
    text-align:center; 
    border:1px solid black; 
    padding:5px 

} 
.geeks { 
    border-right:hidden; 
} 
.gfg { 
    border-collapse:separate; 
    border-spacing:0 45px; 
} 
h1 { 
    color:green; 
}

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 
             
        </style> 
    </head> 
    <body> 
        <center> 
        <h2>Row spacing in a table</h2> 
        <table> 
            <tr> 
                <th>Employee ID</th> 
                <th>Name</th> 
                <th>Gender</th> 
                <th>Age</th> 
            </tr> 
        </table> 
        <table class = "gfg"> 
            <tr> 
                <td class = "geeks">10001</td> 
                <td>Thomas</td> 
                <td>M</td> 
                <td>32</td> 
            </tr> 
            <tr> 
                <td class = "geeks">10002</td> 
                <td>Sally</td> 
                <td>F</td> 
                <td>28</td> 
            </tr> 
            <tr> 
                <td class = "geeks">10003</td> 
                <td>Anthony</td> 
                <td>M</td> 
                <td>24</td> 
            </tr> 
        </table> 
        </center> 
    </body> 
</html>

【讨论】：

【解决方案3】：

您可以使用如下所示的内容。 table-spacing td 上的 colspan="4" 指定单元格应跨越的列数。

建议

但是，如果数据确实彼此不同，我建议实际上使用两个不同的表而不是两个 .它使屏幕阅读器更容易区分数据。为了进一步改善这一点，您可以使用表格标题来进一步提高您的可访问性。

来源：https://www.w3schools.com/tags/tag_thead.asp

.table {
  border-collapse: collapse;
}

.table-spacing td {
  border: none;
  height: 15px; /* Increase/descrease for white-space between 'tables' */
}

td {
  padding: 6px;
  border: 1px solid black;
}

<table class="table">
  <tr>
    <td> Cel 1</td>
    <td> Cel 2</td>
    <td> Cel 3</td>
    <td> Cel 4</td>
  <tr>
  <tr>
    <td> Cel 5</td>
    <td> Cel 6</td>
    <td> Cel 7</td>
    <td> Cel 8</td>
  <tr>
  <tr class="table-spacing"><td colspan="4"></td></tr>
  <tr>
    <td> Cel 1</td>
    <td> Cel 2</td>
    <td> Cel 3</td>
    <td> Cel 4</td>
  <tr>
  <tr>
    <td> Cel 5</td>
    <td> Cel 6</td>
    <td> Cel 7</td>
    <td> Cel 8</td>
  <tr>
</table>

【讨论】：