html - 删除一些行之间的空间（不是全部）

Question

.spacing-table {
    border-collapse: separate;
    border-spacing: 0 5px; /* this is the ultimate fix */
}

.SearchListHeader {
	background-color: #E6E6E6;
	font-size: 14px;
}

.SearchListHeader th {
	border-style: solid;
	border-color: #FFFFFF;
	border-width: 1px;
}

.searchResultRow .td {
	border-style: solid;
	border-color: #FFFFFF;
	border-width: 0 1px 0 0;
	padding: 9px;
	margin: 9px;
}

.listings {
	font-size: 13px;
	line-height: 20px;
	color: #666666;
	margin: 0;
	padding: 0 0 10px 0;
}

table .searchResultRow {
	font-size: 12px;
	word-wrap: break-word;
}

table .searchResultRow > td {
	border-top: none !important;
}

.searchResultRow.oddSearchResultRow {
	background-color: #DAE6ED;
	color: #666666;
}

.searchResultRow.evenSearchResultRow {
	background-color: #71B2D7;
	color: #ffffff;
}

table.resultGridRowSeleted {
	border-style: solid;
	border-color: #000000;
	border-width: 2px;
}

table.tbl_SearchResultRow {
	border-width: 2px;
	border-style: solid;
	font-size: 12px;
	word-wrap: break-word;
	color: #666666;
}

table.tbl_oddSearchResultRow {
	border-color: #DAE6ED;
	background-color: #DAE6ED;
}

table.tbl_evenSearchResultRow {
	border-color: #71B2D7;
	background-color: #71B2D7;
}

.searchResultRow p {
	font-size: 12px !important;
}

.searchResultRow #odd p {
	color: #FFFFFF;
}

    <table style="height: 40px;" class="table spacing-table">
       <tr class="SearchListHeader">
          <th style="width: 25%" class="text-center">Title</th>
          <th style="width: 13%" class="text-center">Platforms</th>
          <th style="width: 11%" class="text-center">Ratings</th>
          <th style="width: 25%" class="text-center">Content Descriptors</th>
          <th style="width: 13%" class="text-center">Other</th>
          <th style="width: 13%" class="text-center">Company</th>
       </tr>
       <tr class="searchResultRow oddSearchResultRow" style="cursor: pointer;">
          <td class="td" width="25%" style="font-size: 14px">
             <strong name="title">Assassin's Creed Liberation HD</strong>
          </td>
          <td class="td" width="13%">
    							PlayStation 3, Windows PC, Xbox 360
          </td>
          <td class="td" width="11%">
             <img src="test.png" alt="Rating" style="margin: 0 auto; display: block;">
          </td>
          <td class="td" width="25%">
    		Intense Violence, Blood, Suggestive Themes,Language, Crude Humor	
          </td>
          <td class="td" width="13%">
    		None
          </td>
          <td class="td" width="13%" style="border-width: 0;">
    		Ubisoft
          </td>
       </tr>
       <tr class="searchResultRow oddSearchResultRow" style="cursor: pointer; font-size: 12px;">
          <td style="border-width: 0 0 0 3px;">&nbsp;</td>
          <td colspan="10" style="border-width: 0 3px 0 0; padding: 10px; font-size: 12px;">
             <p>Summary Description</p>
          </td>
       </tr>
    </table>

我添加到表 css 中，它在行之间添加空间。但现在我不需要第 1 行和第 2 行、第 3 行和第 4 行等之间的空间。（每个偶数行都有前一行的附加信息/摘要信息）。我尝试使用填充删除空间，但这无济于事。

Answer 1

诀窍是从单元格中删除所有边框，除了奇数行中的边框，您为单元格提供 4px 的顶部边框（或任何您想要的行间距。）如果边框颜色是与表格的背景颜色相同，它们会很好地融合在一起，您将看不到颜色的结束位置和表格背景的开始位置。

您可能尝试做类似的事情，但您的 HTML 中有一个错误：奇数行和偶数行都有oddSearchResultRow一个类，因此您尝试应用于一行的任何 CSS 也应用于另一行。（这导致它们也具有相同的背景颜色。）

修复缺陷后，结果如下所示。（我将这对行复制了 3 次，因此您可以更好地看到结果。）

.spacing-table {
  border-collapse: separate;
  border-spacing: 1px;
  /* this is the ultimate fix */
  font-size: 12px;
}
.spacing-table td,
.spacing-table th {
  border-color: white;
  border-style: solid;
  border-width: 0 0 0 0;
  word-wrap: break-word;
}
.SearchListHeader th {
  background-color: #E6E6E6;
  font-size: 116.67%;
}
.searchResultRow td {
  padding: 9px;
  cursor: pointer;
}
.searchResultRow td:first-child {
  font-size: 116.67%;
  font-weight: bold;
}
.searchResultRow img {
  margin: 0 auto;
  display: block;
}
.listings {
  font-size: 13px;
  line-height: 20px;
  color: #666666;
  margin: 0;
  padding: 0 0 10px 0;
}
.searchResultRow.oddSearchResultRow td {
  background-color: #DAE6ED;
  color: #666666;
  border-width: 4px 0 0 0;
}
.searchResultRow.evenSearchResultRow td {
  background-color: #71B2D7;
  color: #ffffff;
}
table.resultGridRowSeleted {
  border-style: solid;
  border-color: #000000;
  border-width: 2px;
}
table.tbl_SearchResultRow {
  border-width: 2px;
  border-style: solid;
  font-size: 12px;
  word-wrap: break-word;
  color: #666666;
}
table.tbl_oddSearchResultRow {
  border-color: #DAE6ED;
  background-color: #DAE6ED;
}
table.tbl_evenSearchResultRow {
  border-color: #71B2D7;
  background-color: #71B2D7;
}
.searchResultRow p {
  font-size: 12px !important;
}
.searchResultRow #odd p {
  color: #FFFFFF;
}

<table class="table spacing-table">
  <thead>
    <tr class="SearchListHeader">
      <th style="width: 25%" class="text-center">Title</th>
      <th style="width: 13%" class="text-center">Platforms</th>
      <th style="width: 11%" class="text-center">Ratings</th>
      <th style="width: 25%" class="text-center">Content Descriptors</th>
      <th style="width: 13%" class="text-center">Other</th>
      <th style="width: 13%" class="text-center">Company</th>
    </tr>
  </thead>
  <tbody>
    <tr class="searchResultRow oddSearchResultRow" style="cursor: pointer;">
      <td class="td">
        <strong name="title">Assassin's Creed Liberation HD</strong>
      </td>
      <td class="td">
        PlayStation 3, Windows PC, Xbox 360
      </td>
      <td class="td">
        <img src="test.png" alt="Rating">
      </td>
      <td class="td">
        Intense Violence, Blood, Suggestive Themes,Language, Crude Humor
      </td>
      <td class="td">
        None
      </td>
      <td class="td">
        Ubisoft
      </td>
    </tr>
    <tr class="searchResultRow evenSearchResultRow">
      <td>&nbsp;</td>
      <td colspan="10">
        <p>Summary Description</p>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr class="searchResultRow oddSearchResultRow" style="cursor: pointer;">
      <td class="td">
        <strong name="title">Assassin's Creed Liberation HD</strong>
      </td>
      <td class="td">
        PlayStation 3, Windows PC, Xbox 360
      </td>
      <td class="td">
        <img src="test.png" alt="Rating">
      </td>
      <td class="td">
        Intense Violence, Blood, Suggestive Themes,Language, Crude Humor
      </td>
      <td class="td">
        None
      </td>
      <td class="td">
        Ubisoft
      </td>
    </tr>
    <tr class="searchResultRow evenSearchResultRow">
      <td>&nbsp;</td>
      <td colspan="10">
        <p>Summary Description</p>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr class="searchResultRow oddSearchResultRow" style="cursor: pointer;">
      <td class="td">
        <strong name="title">Assassin's Creed Liberation HD</strong>
      </td>
      <td class="td">
        PlayStation 3, Windows PC, Xbox 360
      </td>
      <td class="td">
        <img src="test.png" alt="Rating">
      </td>
      <td class="td">
        Intense Violence, Blood, Suggestive Themes,Language, Crude Humor
      </td>
      <td class="td">
        None
      </td>
      <td class="td">
        Ubisoft
      </td>
    </tr>
    <tr class="searchResultRow evenSearchResultRow">
      <td>&nbsp;</td>
      <td colspan="10">
        <p>Summary Description</p>
      </td>
    </tr>
  </tbody>
</table>