Question 44245 in Html Question posted in
Some basic documentation can be found here.

Why some border is overlapped by the previous cell border? – Html

The following is the output of the react code:

.borderCell {
    border: 1px solid #e0e0e0;
}
.shiftCell{
    background-color:#ff99cc;
    min-width:27px;
    text-align: center; 
}
.shiftContent:focus{
    outline: none
}
.shiftContent{
    padding: 0px;
    margin: 0px;
}
.shiftContent::-moz-selection{
    background: none; 
}
.shiftContent::selection{
    background: none; 
}
.littleSquareDiv {
    background-color: rgb(0, 140, 255);
    top: calc(100% - 3px);
    left: calc(100% - 3px);
    height: 6px;
    position: absolute;
    width: 6px;
    z-index: 10;
}

.littleSquareDiv:hover {
    cursor: crosshair;
}
.selectCellBorderBottom{
    border-bottom: 1px solid rgb(0, 140, 255);
}
.selectCellBorderLeft{
    border-left: 1px solid rgb(0, 140, 255);
}
.selectCellBorderRight{
    border-right: 1px solid rgb(0, 140, 255);
}
.selectCellBorderTop{
    border-top: 1px solid rgb(0, 140, 255);
}
    <table class="m-3">
      <tbody>
        <tr>
          <td class="borderCell shiftContent " contenteditable="true">0,0</td>
          <td class="borderCell shiftContent " contenteditable="true">1,0</td>
          <td class="borderCell shiftContent " contenteditable="true">2,0</td>
        </tr>
        <tr>
          <td class="borderCell shiftContent " contenteditable="true">0,1</td>
          <td class="borderCell shiftContent selectCellBorderTop selectCellBorderBottom selectCellBorderRight selectCellBorderLeft" contenteditable="true">1,1</td>
          <td class="borderCell shiftContent " contenteditable="true">2,1</td>
        </tr>
        <tr>
          <td class="borderCell shiftContent " contenteditable="true">0,2</td>
          <td class="borderCell shiftContent " contenteditable="true">1,2</td>
          <td class="borderCell shiftContent " contenteditable="true">2,2</td>
        </tr>
      </tbody>
    </table>

When I place the code to jsfiddle, the central cell 4 border can be shown successfully.
Unfortunately, when the above code is outputted by react(please click the central cell) only the right, the bottom border of the central cell can be shown successfully.

Would you tell me why?

The expected result as below:

This is the expected result

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Finally, I changed the CSS as below:

    .borderCell {
   border-left: 1px solid #e0e0e0;
   border-top: 1px solid #e0e0e0;
}
.borderCell:last-child {
  border-right: 1px solid #e0e0e0;
}

tbody tr:last-child td.borderCell {
  border-bottom: 1px solid #e0e0e0;
}

    It works fine.


  2. 0

    Are you like the see the table like this?

    Are you like the see the table like this

    Login or Signup to reply.
  3. 0

    I noticed the following CSS code (maybe added by bootstrap):

    table {
    border-collapse: collapse;
}

    Try adding the following to your code:

    table {
    border-collapse: separate !important;
}
    Login or Signup to reply.
  4. 0

    Are you like the see the table like this?

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search