I am drawing a table with highly customized styles for its cells. Unfortunately, I discovered that increasing the border of the 6th cell to 4px creates a rendering problem as displayed in this screenshot: 
this is the CSS for the rule that introduced the problem:
tr.item_cnnc td:first-child + td + td + td + td + td { border: 4px solid black; } I just wonder why the border on the 3rd row is not displayed correctly. Any suggestions?
EDIT: pasting the HTML of the affected row:
<tr class="item item_cnnc"> <td class="itemid item_kritisch">DP3</td> <td class=" item_kritisch"> put text here </td> <td class="option item_kritisch"> <input type="checkbox" name="Item_DP3_relevant" value="1" > </td> <td class="option"> <input type="text" size="1" name="Item_DP3_vw_pij" > </td> <td class="option item_kritisch"> <input type="text" size="1" name="Item_DP3_pij" > </td> <td class="option"> <input type="checkbox" name="Item_DP3_kr" value="true" > </td> <td class=" info parent"> <div id="popup_DP3" class="dropdown">put info here</div> <a href="#info_DP3" id="info_DP3"> <img src="/images/Information_icon_small.png" alt="Info" width="15" height="15" border="0" class="x"/></a> </td> </tr> 
