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，在行之间添加空间。但现在我不需要第一行和第二行、第三行和第四行等之间的空间(每一行都有附加信息/前一行的摘要信息)。我尝试用填充删除空间，但它没有帮助。

Answer 1

诀窍是去除单元格的所有边框，除了奇数行中的那些，你给单元格一个 4px 的顶部边框(或者任何你想要的行间距)。如果边框颜色与表格的背景颜色相同，它们会很好地融合在一起，您不会看到颜色结束和表格背景开始的位置。

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

修复缺陷后，结果如下所示。 (我把这对行复制了三遍，所以你可以更好地看到结果。)

.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>