Clever Geek Handbook

Remove the spacing in the TD element that contains the list

I would like to remove the padding present in the first row of the table, so it has the same height as the second row. I'm not sure where the padding is coming from as I have set padding to zero on the td

ul

and elements li

.

http://jsfiddle.net/d9no97vL/

<table>
  <tr>
    <td><ul><li>abc</li><li>def</li></ul></td>
    <td>this row is too wide</td>
  </tr>
  <tr>
    <td></td>
    <td>this row is just right</td>
  </tr>
</table>

And the css:

ul li { display: inline; margin: 0; padding: 0; }
table { border-collapse: collapse; border: 1px solid black; }
td { padding: 0px; border: 1px solid black; }
+3


source to share


3 answers


This is because of the default padding / margin for the element ul

(dictated by the browser style sheets). Add the following:

ul { margin: 0; padding: 0; }


DEMO

+3


source


Your problem was with ul li.

instead of using:

ul li {
    display: inline;
    margin: 0;
    padding: 0;
}


Using:

ul,li {
    display: inline;
    margin: 0;
    padding: 0;
}

JSfiddle

+1


source


Add this css style to your styles

ul {
    display: inline;
    padding: 0;
}

DEMO: http://jsfiddle.net/d9no97vL/7/

0


source






More articles:


All Articles