CODEWITHSUNDEEP
htmlcsscellspacingcellpadding
demo
demo

Reputation: 6235

Remove space between some rows ( not all)

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

I add to table css which add space between rows. But now i don't need that space between 1st and 2nd rows, 3rd and 4th etc. (Every even row have additional information/ summary information to previous row). I try to remove space with padding, but it doesn't help.

Upvotes: 1

Views: 69

Answers (1)

Mr Lister
Mr Lister

Reputation: 46559

The trick is to remove all borders from the cells, except from the ones in the odd rows, where you give the cells a top border of 4px (or whatever you want the inter-row spacing to be.) If the border color is the same as the background color of the table, they will blend in nicely and you won't see where the color ends and the table background begins.

You probably tried to do something similar, but you have an error in your HTML: both the odd rows and the even rows had oddSearchResultRow for a class, so any CSS you tried to applied to one row got applied to the other row as well. (This caused them to have the same background color too.)

With the flaws fixed, the result looks like this. (I copied the pair of rows three times, so you can see the result better.)

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

Upvotes: 1

Related Questions