Setting table row height

Question

I have this code     lt table class  topics   gt       lt tr gt           lt td style  white-space  nowrap  padding  0 5px 0 0  color  3A5572  font-weight  bold   gt Test lt  td gt           lt td style  padding  0 4px 0 0   gt 1 0 lt  td gt           lt td gt abc lt  td gt       lt  tr gt       lt tr gt            lt td style  white-space  nowrap  padding  0 5px 0 0  color  3A5572  font-weight  bold   gt test2 lt  td gt           lt td style  padding  0 4px 0 0   gt 1 3 lt  td gt           lt td gt def lt  td gt       lt  tr gt   lt  table gt    The rows are spaced too far apart  I want the lines closer together   What I did was to add the following CSS but it doesn t seem to change anything     topics tr   height  14px      What am I doing wrong

User · Answer

You can remove some extra spacing as well if you place a border-collapse  collapse  CSS statement on your table

User · Answer

I found the best answer for my purposes was to use   topics tr        overflow  hidden      height  14px      white-space  nowrap     The white-space  nowrap is important as it prevents your row s cells from breaking across multiple lines  I personally like to add text-overflow  ellipsis to my th and td elements to make the overflowing text look nicer by adding the trailing fullstops  for example Too long gets dots

User · Answer

try this    topics tr   line-height  14px

User · Answer

try setting the attribute for td so    topic td  height  14px

User · Answer

If you are using Bootstrap  look at padding of your tds

User · Answer

As for me I decided to use paddings  It is not exactly what you need  but may be useful in some cases  table td       padding  15px 0

User · Answer

line-height only works when it is larger then the current height of the content of  lt td gt    So  if you have a 50x50 icon in the table  the tr line-height will not make a row smaller than 50px    padding     Since you ve already set the padding to 0 it must be something else  for example a large font-size inside td that is larger than your 14px

User · Answer

once I need to fix the height of a particular valued row by using inline CSS as following     lt tr gt  lt td colspan  4  style  height  10px   gt xxxyyyzzz lt  td gt  lt  tr gt

[html] Setting table row height

Examples related to html

Examples related to css