I have a page at http://dot.kr/x-test/html/row.php
Yellow boxes have border-radius and padding while Pink boxes have not.
When the chrome browser is becoming narrow, The display Table-row of the pink boxes are not broken while Yellow boxes are broken
How can I get the boxes which have border radius and padding and are not broken when the chrome browser is becoming narrow?
In order to make my talking clear I made very long text with spaces inside each cell at http://dot.kr/x-test/html/row.php.
The pink boxes are not broken means that the text in the cell1, cell2, cell3, or cell4 has line breaks inside the each cell so there is not any text just under the title1, title2, title3, or title4 while the yellow boxes are broken means that the text in the cell5, cell6, cell7, or cell8 is just under the title1, title2, title3 or title4 each.
I like to keep some empty spaces just under the title1, title2, title3 and title4
with the boxes has radius and padding.
I can keep the empty spaces just under the title1, title2, title3 and title4 but I cannot put the radius and padding in the pink box.
I can put the radius and padding in the yellow box but I cannot keep the empty spaces just under the title5, title6, title7 and title8.
And what else do the pink boxes not have that may be making the difference?
You have the titles in the first example in their own table-cells and of course the text in another cell will not wrap underneath.
Do the same for the pink boxes and they will line up the same.
Note that you can’t add padding to table-rows either. You have to add it to the td or th elements instead.
To have a rounded row then apply a left top and bottom radius to the first cell and a right top and bottom to the last cell. Put the background colour on the cells also.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.