我想從HTML表格的最后一列中刪除邊框和css，并顯示為好像最后一列不僅僅是表格的一部分，表格已經(jīng)在倒數(shù)第二列結(jié)束。

實(shí)際需求:在行中有錯(cuò)誤的地方顯示錯(cuò)誤圖像。

請(qǐng)找到我一直在嘗試的以下代碼:

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
tr:nth-child(even) {
    background-color: #dddddd;
}
#myTable tbody > tr:last-child > td {
  border: 0;
}

<table id="myTable">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>abc</td>
    <td>ffff</td>
    <td>Germany</td>
     <td><img src="smiley.gif" alt="Smiley face" width="42" height="42"></img></td>
  </tr>
  <tr>
    <td>abac</td>
    <td>dddd</td>
    <td>Mexico</td>
     <td><img src="smiley.gif" alt="Smiley face" width="42" height="42"></img></td>
  </tr>
  <tr>
    <td>abcd</td>
    <td>fdfd</td>
    <td>Austria</td>
     <td><img src="smiley.gif" alt="Smiley face" width="42" height="42"></img></td>
  </tr>
  <tr>
    <td>abcde</td>
    <td>dddd</td>
    <td>UK</td>
     <td><img src="smiley.gif" alt="Smiley face" width="42" height="42"></img></td>
  </tr>
  <tr>
    <td>dert</td>
    <td>bbbb</td>
    <td>Canada</td>
     <td><img src="smiley.gif" alt="Smiley face" width="42" height="42"></img></td>
  </tr>
  <tr>
    <td>asd</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
     <td><img src="smiley.gif" alt="Smiley face" width="42" height="42"></img></td>
  </tr>
</table>

我已經(jīng)創(chuàng)建了演示，這是你在看嗎？

td:last-child {
  border :none;
  background-color: #ffffff;
}

演示

我剛剛改變了你的css中的兩條規(guī)則:

td:not(:last-child), th:not(:last-child) { /* I just added ':not(:last-child)' here */
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) td:not(:last-child) { /* And here */
    background-color: #dddddd;
}

我還建議將html中的圖片selectos從& ltimg & gt& lt/img & gt；到& ltimg & gt因?yàn)椤皹?biāo)記是空的，它只包含屬性，并且沒有結(jié)束標(biāo)記。”。

這是我的一個(gè)實(shí)例

試試這個(gè)...調(diào)整最后一列。

#myTable tbody > tr > td:last-child {
  border: 0;
  // any other options needed.
}

此外，要移除其他css，應(yīng)該對(duì)td的任何CSS進(jìn)行樣式化...

#myTable tbody > tr > td:not(:last-child) {
  // CSS for other columns
}

步驟:放棄邊框，設(shè)置所有單元格的邊框(除了行中的最后一個(gè))

border-collapse屬性可以丟棄邊框，然后顯示邊框。 pseudo selectors:not(:last-child)將丟棄每行最后一個(gè)單元格的邊框。