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行目などの間にそのスペースは必要ありません(すべての偶数行には、前の行への追加情報/要約情報があります)。パディングでスペースを削除しようとしましたが、役に立ちません。

score 0 · Accepted Answer

秘訣は、奇数行の境界線を除いて、セルからすべての境界線を削除することです。ここでは、セルに 4px の境界線を付けます (または、行間の間隔を任意に設定します)。境界線の色がテーブルの背景色と同じように、それらはうまく調和し、色がどこで終わり、テーブルの背景が始まるかがわかりません。

おそらく似たようなことをしようとしましたが、HTML にエラーがあります: 奇数行と偶数行の両方がoddSearchResultRowクラスにあったため、1 つの行に適用しようとした 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>

html - 一部の行の間のスペースを削除します (すべてではない)

1 に答える 1

Related

Reference