Question

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>

Answer 1

It could get messy having different sized borders on table cells, I wouldn’t recommend it.

Why not nest the checkbox inside a div with a black border, and height and width of 100%?
That might be a more consistent way of gettign the result you want.