How to control tr height of table in CSS


Tags: css,table,height,tablerow

Problem :

I try to reduce the white space between each tr in a table.

I have set "table id='recTable' cellspacing=\"0\" cellpadding=\"0\"", that means there is no space between each tr(comfirmed). So what only I need to do is reduce the height of tr itself.

I used "height:40px;" for doing this, but it doest work, no change.

It alawys shows a 70px height. But if I set a big height like "height:100px;", which the height is more than 70px, then it will change to the height I set.

How can I do it?



Solution :

You can set this explicitly in your css. For example:

table#recTable{width:100%; border:1px solid red;}
#recTable tr td {height:40px; border:1px solid red;}

HTML

<table id="recTable">
    <tr><td>Something</td></tr>
    <tr><td>Something else</td></tr>
</table>

http://jsfiddle.net/jasongennaro/qXpLM/

Borders just for example


    CSS Howto..

    Unsure of how to wrangle my javascript dependencies

    How do I place a DIV class in a specific position over another DIV class?

    CSS Tooltip has different position in different browsers. How can I account for this?

    How to prevent css borders from floating to the top of parent div

    how to do CSS for below image box (not a shadow box) [duplicate]

    How to get CSS or XPath locator from a button class

    How to make space between menu items in CSS/HTML

    How to trigger css :hover event on PageLoad

    How can I remove/cover up a section of a border?

    How do I fix hover property of a div?

    How do I select all elements of a specific class name?

    How to resolve background-image url inside css file while using azure blob storage

    How can I give a child element of one parent a higher z-index than another parent?

    how to bench a css pseudo-elements

    How to check if svg element supports css transform

    How to get elements by class and provide css effects?

    How to only deregister Wordpress stylesheet for non-logged in users?

    In laravel 4, How to render in template (blade) plain css or js from file?

    How do I keep my input fields on one line while centering the DIV that contains them?

    How to set borders between children from parent in CSS?

    How can I prevent my li's from going below my menu even if there is no room?

    How to know if an element's width is absolute or relative?

    How to fit in an image inside span tag when onclick?

    How can design a full screen calendar view in Twitter Bootstrap?

    How to use conditional CSS for IE browser in drupal6?

    How to link a HTML page to a CSS file when the CSS file is in an upper directory?

    ExtJS - How to style disabled buttons?

    How to display print preview as same as the webpage using css?

    How to enlarge and tint photo with pure CSS and jQuery [closed]

    How to split page and reveal stuff underneath?