There is an example of a label: enter image description here

It is necessary that it be like this: enter image description here

Those. so that the cells have an indent from the edges of the table, how to do this? I tried paddings, but they do not work on the cell, but only on its contents.

  • one
    I do not see that the table is something different than the values. No code provided with the problem. For 4 months it was possible to get comfortable and understand that there are no telepaths here. Indents are set via padding or margin . It is not clear from the question whether to center the text or add text on the left. From what edges, only to the left or from all, is unknown - Mr. Black
  • @Doofy what code do you need? I think I asked a specific question and gave an example in order to make it clear how it should be, and where is the code that I have? What does it affect in this case? - Denis
  • The code for the table itself and the styles so that you can reproduce the example. Maybe an ordinary cellpadding needed - Mr. Black
  • @Doofy I did, after all, there are rows in the rows highlighted by a light background, there are some small indents to the left and right) true, you can break your eyes ... - lexxl
  • @ Denis without your code is difficult to say something. therefore I can only offer a couple of options: if the indents do not work, set the light background to the odd blocks to set the gradient with transparency of the desired size along the edges, or experiment with the border, box-shadow ... - lexxl

1 answer 1

You can try to "nakostilyt" with additional cells.

 table { width: 250px; height: 50px; text-align: center; vertical-align: middle; border-collapse: collapse; } td { border: 2px solid blue; margin: 10px; background-color: white; padding: 10px; } .brdL, .brdR { width: 5px; border-top: none; border-bottom: none; padding: 0; } .trTop td, .trBot td{ height: 5px; } .trTop .brdL, .trTop .brdR { border-top: 2px solid blue; } .trBot .brdL, .trBot .brdR { border-bottom: 2px solid blue; } .brdLR { border-left: none; border-right: none; padding: 0; } .brdL { border-right: none; } .brdR { border-left: none; } 
 <table> <tr class="trTop"> <td class="brdL"></td> <td colspan="4" class="brdLR"></td> <td class="brdR"></td> </tr> <tr> <td class="brdL"></td> <td colspan="2">12</td> <td colspan="2">24</td> <td class="brdR"></td> </tr> <tr> <td class="brdL"></td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td class="brdR"></td> </tr> <tr class="trBot"> <td class="brdL"></td> <td colspan="4" class="brdLR"></td> <td class="brdR"></td> </tr> </table>