Question

我知道这个问题可能已经被问过几次了，但是没有一个答案能解决我的问题。无论如何，我有以下HTML

<table style="height: 305px;" border="1" width="579" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 137px;">A</td>
<td style="width: 138px;">B</td>
<td style="width: 138px;">C</td>
<td style="width: 138px;">
<table style="height: 79px;" border="1" width="140" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 39px;">1</td>
<td style="width: 39px;">2</td>
<td style="width: 40px;">3</td>
</tr>
<tr>
<td style="width: 39px;">4</td>
<td style="width: 39px;">5</td>
<td style="width: 40px;">6</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 137px;">E</td>
<td style="width: 138px;">F</td>
<td style="width: 138px;">G</td>
<td style="width: 138px;">
<table style="height: 107px;" border="1" width="142" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 40px;">1</td>
<td style="width: 40px;">2</td>
<td style="width: 40px;">3</td>
</tr>
<tr>
<td style="width: 40px;">4</td>
<td style="width: 40px;">5</td>
<td style="width: 40px;">6</td>
</tr>
<tr>
<td style="width: 40px;">7</td>
<td style="width: 40px;">8</td>
<td style="width: 40px;">9</td>
</tr>
<tr>
<td style="width: 40px;">10</td>
<td style="width: 40px;">11</td>
<td style="width: 40px;">12</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 137px;">I</td>
<td style="width: 138px;">J</td>
<td style="width: 138px;">K</td>
<td style="width: 138px;">&nbsp;</td>
</tr>
</tbody>
</table>

我试图仅显示onClick表的最后一列，但无论如何尝试，事情都是由嵌套表空间组成的最后一个单元格。我已经尝试使用rowspan，border-collapse，margin，但似乎都没有帮助

有输入吗？

Answer 1

将表设置为table-layout: fixed（通过转到W3Schools，您可以了解它与默认表有何不同）。然后将嵌套表设置为width的{{1}}和height。那应该可以解决您的问题。

100%

body {
  font-family: sans-serif;
}

table.tlf {
  table-layout: fixed;
}

table table {
  width: 100%;
  height: 100%;
}
 
table td {
  text-align: center;
}

如果要删除嵌套表的边框，则必须使用一些CSS。在<table class="tlf" style="height: 305px;" border="1" width="579" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="width: 137px;">A</td> <td style="width: 138px;">B</td> <td style="width: 138px;">C</td> <td style="width: 138px;"> <table border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="width: 39px;">1</td> <td style="width: 39px;">2</td> <td style="width: 40px;">3</td> </tr> <tr> <td style="width: 39px;">4</td> <td style="width: 39px;">5</td> <td style="width: 40px;">6</td> </tr> </tbody> </table> </td> </tr> <tr> <td style="width: 137px;">E</td> <td style="width: 138px;">F</td> <td style="width: 138px;">G</td> <td style="width: 138px;"> <table border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="width: 40px;">1</td> <td style="width: 40px;">2</td> <td style="width: 40px;">3</td> </tr> <tr> <td style="width: 40px;">4</td> <td style="width: 40px;">5</td> <td style="width: 40px;">6</td> </tr> <tr> <td style="width: 40px;">7</td> <td style="width: 40px;">8</td> <td style="width: 40px;">9</td> </tr> <tr> <td style="width: 40px;">10</td> <td style="width: 40px;">11</td> <td style="width: 40px;">12</td> </tr> </tbody> </table> </td> </tr> <tr> <td style="width: 137px;">I</td> <td style="width: 138px;">J</td> <td style="width: 138px;">K</td> <td style="width: 138px;"> </td> </tr> </tbody> </table>（而不是表格）上放置边框，并为包含表格的td（s）提供一个类。然后，以该特定td的前两个孩子为目标，以删除其左边界。不过，我不得不将嵌套表格的宽度调整为101％（如果您打算保留像素值作为宽度，则可以手动将其调整为145px）。

td

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
}

table table {
  width: 101%;
  height: 100%;
}
 
table td {
  text-align: center;
  border: 1px solid #000;
}

.table-container {
  border: 0;
}

.table-container tr td:first-child {
  border-left: 0;
}

第三种解决方案，不要嵌套表并使用<table class="tlf" style="height: 305px;" width="579" cellspacing="0" cellpadding="0"> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> <td class="table-container"> <table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> </td> </tr> <tr> <td>E</td> <td>F</td> <td>G</td> <td class="table-container"> <table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> </tr> </tbody> </table> </td> </tr> <tr> <td>I</td> <td>J</td> <td>K</td> <td> </td> </tr> </tbody> </table>和colspan实现相同的目的。

rowspan

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
}

table table {
  width: 101%;
  height: 100%;
}
 
table td {
  text-align: center;
  border: 1px solid #000;
}

.table-container {
  border: 0;
}

.table-container tr td:first-child {
  border-left: 0;
}

Answer 2

您在这里：
您需要使用 border：none 属性

删除嵌套的表格轮廓边框

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
          body {
        font-family: sans-serif;
      }

      table.tlf {
        table-layout: fixed;
        margin: 0;
        padding: 0;
      }

      table table {
        width: 100%;
        height: 100%; 
      }

      .no-bord {
        border: none;
      }
       
      table td {
        text-align: center;
      }
  </style>
</head>
<body>
<table class="tlf" style="height: 305px;" border="1" width="579" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 137px;">A</td>
<td style="width: 138px;">B</td>
<td style="width: 138px;">C</td>
<td style="width: 138px;">
<table class = "no-bord" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 39px;">1</td>
<td style="width: 39px;">2</td>
<td style="width: 40px;">3</td>
</tr>
<tr>
<td style="width: 39px;">4</td>
<td style="width: 39px;">5</td>
<td style="width: 40px;">6</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 137px;">E</td>
<td style="width: 138px;">F</td>
<td style="width: 138px;">G</td>
<td style="width: 138px;">
<table class = "no-bord" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 40px;">1</td>
<td style="width: 40px;">2</td>
<td style="width: 40px;">3</td>
</tr>
<tr>
<td style="width: 40px;">4</td>
<td style="width: 40px;">5</td>
<td style="width: 40px;">6</td>
</tr>
<tr>
<td style="width: 40px;">7</td>
<td style="width: 40px;">8</td>
<td style="width: 40px;">9</td>
</tr>
<tr>
<td style="width: 40px;">10</td>
<td style="width: 40px;">11</td>
<td style="width: 40px;">12</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 137px;">I</td>
<td style="width: 138px;">J</td>
<td style="width: 138px;">K</td>
<td style="width: 138px;">&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>

如何删除嵌套表之间的间距？

2 个答案: